1. X:checked
input[type=radio]:checked{border: 1px solid black;}
这个伪类选择器只会作用于被选中的用户界面元素(user interface element)，比如说单选按钮，或者复选框。
2. X:before、X:after
p:after{content:"台词：";background-color:yellow;color:red;font-weight:bold;}
在每个
元素后面插入内容，并设置所插入内容的样式：
3. E:link：匹配所有未被点击的链接
E:visited：匹配所有已被点击的链接
E:active：匹配鼠标已经其上按下、还没有释放的E元素
E:hover：匹配鼠标悬停其上的E元素
E:focus：匹配获得当前焦点的E元素
4. E:target：匹配文档中特定”id”点击后的效果。
5. X:not(Selector)
div:not(#container) {color: blue;}
选择除#container层外的所有div层。
6. X:PseudoElement
使用这类伪类(用::指定)可以设计一个元素的一片断，如第一行，或第一个字。这伪类只能作用于块元素。
选择段落的第一个字符
p:first-letter {font-size: 2em;}
选择段落的第一行
p:first-line {font-size: 1.2em;}
7. X:nth-Child(an+b)
用法一：数字序号:nth-child(number)：直接匹配第number个元素。number必须为大于0的整数。
li:nth-child(3){}/*第3个LI*/
用法二：倍数写法:nth-child(an)：匹配所有倍数为a的元素。字母n是倍数写法的标志，如3n、5n。
li:nth-child(3n){}/*第3、第6、第9、…、所有3的倍数的LI*/
用法三：倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)：a,b均为正整数或0。如3n+1、5n-1。
li:nth-child(3n+1){}/*匹配第1、第4、第7、…/
li:nth-child(3n+5){}/*匹配第5、第8、第11、…/
li:nth-child(5n-1){}/*匹配第5-1=4、第10-1=9、…/
li:nth-child(3n±0){}/*相当于(3n)*/
li:nth-child(±0n+3){}/*相当于(3)*/
用法四：反向倍数分组匹配:nth-child(-an+b)：倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。
li:nth-child(-3n+8){}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){}/*或(-n+8)，匹配前8个LI*/
用法五种：奇偶匹配:nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
8. X:nth-Last-Child(N)
li:nth-last-child(2) {color: red;}
如果列表项非常多，但只是需要选择倒数第三个。和上面的用法不一样，nth-last-child是从后面倒着数。
9. X:nth-of-type(an+b)
用法和第7条的X:nth-Child(an+b)相同，不同点：
<ul class="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>
.demo li:nth-child(2)：选择demo下面的第二个子元素，如果该元素不是li标签则选择失败，所以选择了first li标签
.demo li:nth-of-type(2)：选择demo下面的第二个li元素，所以选择了second li标签
不指定标签:
.demo :nth-child(2)：选择了第二个元素first li元素
.demo :nth-of-type(2)：选择了demo下面的p标签的第二个second p元素和li标签的第二个second li元素，选择了所有类型标签的第二个。
10. X:nth-Last-Of-Type(N)
ul:nth-last-of-type(3) {border: 1px solid black;}
选择倒数第几个元素。
11. X:first-Child
ul li:first-child {border-top: none;}
这个伪类选择父级元素的第一个子对象。经常用于移除列表的第一个元素的边框。
12. X:last-Child
ul li:last-child {color: green;}
这个伪类选择父级元素的最后一个对象。经常用于移除列表的最后一个元素的边框。
13. X:only-Child
div p:only-child {olor: red;}
只有第一层中的第一个p标签会变色。父级元素下的子类多于一个时这个伪类效果就停止了。
14. X:only-Of-Type
li:only-of-type {font-weight: bold;}
这个伪类只会在父级元素下只有一个子级元素X的情况下起作用。
15. X:first-Of-Type
first-of-type允许我们选择同级元素的第一个。
- 本文固定链接: https://www.qingheluo.com/changjiancssweilei/
- 转载请注明: qingheluo 于 清河洛 发表
