30个最常用css选择器解析讲解

.clearfix:after { content: \ display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix {

*display: inline-block; _height: 1%; }

19. X:hover

以下是代码片段: div:hover {

background: #e3e3e3; }

:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。 需要注意的是,在ie 6中,:hover只能用于链接元素。

这里分享一个经验,在设定链接划过时出现下滑线时,使用border-bottom会比text-decoration显得更漂亮些。代码如下:

以下是代码片段: a:hover {

border-bottom: 1px solid black; }

兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera 20. X:not(selector)

以下是代码片段: div:not(#container) { color: blue; }

否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中,设定除了id为container的div元素字体颜色为blue。

兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera 21. X::pseudoElement

::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是,这个::伪类只能用于块状元素。

下面的代码设定了段落中第一个字母的样式:

以下是代码片段: p::first-letter { float: left;

font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }

下面的代码中设定了段落中第一行的样式:

以下是代码片段: p::first-line {

font-weight: bold; font-size: 1.2em; }

兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera (IE6竟然支持,有些意外啊。) 22. X:nth-child(n)

以下是代码片段: li:nth-child(3) { color: red; }

这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中,设定第三个列表元素li的字体颜色为红色。

看一个更灵活的用法,在下面例子中设定第偶数个元素的样式,可以用它来实现隔行换色:

以下是代码片段: tr:nth-child(2n) {

background-color: gray; }

兼容浏览器:IE9+、Firefox、Chrome、Safari 23. X:nth-last-child(n)

以下是代码片段: li:nth-last-child(2) { color: red; }

与X:nth-child(n)功能类似,不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。

兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera 24. X:nth-of-type(n)

以下是代码片段: ul:nth-of-type(3) {

border: 1px solid black; }

与X:nth-child(n)功能类似,不同的是它匹配的不是某个序列元素,而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。

兼容浏览器:IE9+、Firefox、Chrome、Safari 25. X:nth-last-of-type(n)

以下是代码片段: ul:nth-last-of-type(3) { border: 1px solid black; }

与X:nth-of-type(n)功能类似,不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框

兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera 26. X:first-child

:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框,如:

以下是代码片段: ul:nth-last-of-type(3) { border: 1px solid black; }

兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera 27. X:last-child

联系客服:779662525#qq.com(#替换为@) 苏ICP备20003344号-4