一、标签选择器：
标签 <input type = 'text' class='input' id='inp' />
举例：input{ }; //所有input标签
二、类选择器：
标签 <input type = 'text' class='input' id='inp' />
举例：.input{ }; //class包含input的标签
三、ID选择器：
标签 <input type = 'text' class='input' id='inp' />
举例：#inp{ }; //ID等于inp的标签
四、属性选择器：
标签 <input type = 'text' class='input' id='inp' />
举例：input[type=‘text’]{ }; //type属性等于text的input标签
input[type]{ }; //包含type属性的input标签
五、nth-child() 、nth-of-type()选择器：
标签：input*3（表示三个input标签）
input:nth-child(2){ } ;input:nth-of-type(2){ } //表示第二个input标签
input:nth-child(odd){ };input:nth-of-type(odd){ }; //表示奇数位input标签
input:nth-child(even){ } ;input:nth-of-type(even){ }; //表示偶数位input标签
input::nth-child(3n+0){ } ;input::nth-of-type(3n+0){ }; //表示位置是3的倍数的input标签
input:nth-child(n+2){ }; input:nth-of-type(n+2){ }; //表示位置大于等于2的input标签
六、‘+’、’>’、’~’、’ ‘、’,'符号：
标签：
<input type=“text” />
<div>
<span></span>
<p><span></span></p>
</div>
<p></p>
div + p{ } //与div相邻的p标签
div > span { } //div包含的第一级span标签，不包括div下面p标签内的span标签
input:focus ~ div{ } //当input聚焦时，选中div标签
div span{ } //div包含的所有span标签
input,div{ } //input标签和div标签
七、伪类选择器：
不举例了。
a:link 、a:visited 、a:hover 、a:active //必须按顺序写才能有效
//链接点击之前、链接访问过后、鼠标在标签上、点击标签不松手
input:focus //input聚焦
p:before //p标签之前插入一个内容
八、first-child、last-child选择器
不举例了。
p:first-child{ } //第一个p标签
p:last-child{ } //最后一个p标签
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
