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
出处:css9.net
责任编辑:bluehearts
上一页 30个最常用css选择器解析 [4] 下一页 30个最常用css选择器解析 [6]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|