常见css伪类

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允许我们选择同级元素的第一个。

最后编辑：2019-03-19

作者：qingheluo

这个作者貌似有点懒，什么都没有留下。

站内专栏