首页 > html5+css > css基础知识 > 常见css伪类
2016
12-16

常见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(N)

li:nth-child(3) {color: red;}

nth-child接受整数参数,不过它不是基于零开始,如果你要选择列表中的第二个,就使用li:nth-child(2)。

我们还可以使用这个伪类选择几个子类。比如,用li:nth-child(4n)来选择4倍数的列表。

8. X:nth-Last-Child(N)

li:nth-last-child(2) {color: red;}

如果列表项非常多,但只是需要选择倒数第三个。和上面的用法不一样,nth-last-child是从后面倒着数。

9. X:nth-Of-Type(N)

ul:nth-of-type(3) {border: 1px solid black;}

根据类型选择元素。比如说现在有5个无序列表,但只需选择第三个,这时可以使用ul:nth-of-type(3)。

10. X:nth-Last-Of-Type(N)

ul:nth-last-of-type(3) {border: 1px solid black;}

也可以使用nth-last-of-type选择倒数第几个元素。

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

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。