(转载)http://blog.csdn.net/yisuowushinian/article/details/46046909
1.CSS中的伪类
CSS 伪类用于向某些选择器添加特殊的效果。
语法:
- 1
- 1
CSS 类也可与伪类搭配使用
- 1
- 1
如下面的一段代码:
- 1
- 2
- 1
- 2
1.1锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
注意:
1.在 CSS 定义中,a:hover
必须被置于 a:link
和 a:visited
之后,才是有效的。
2.在 CSS 定义中,a:active
必须被置于a:hover
之后,才是有效的。
3.伪类名称对大小写不敏感。
1.2 CSS2 - :first-child 伪类
定义:
first-child 伪类来选择元素的第一个子元素。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
效果如下图:
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。
必须声明
<!DOCTYPE>
,这样 :first-child 才能在 IE 中生效。
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
选择器匹配作为任何元素的第一个子元素的 p 元素
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
选择器匹配所有 <p>
元素中的第一个<i>
元素
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
选择器匹配所有作为元素的第一个子元素的 <p>
元素中的所有 <i>
元素
1.3 CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2.CSS中的伪元素
CSS 伪元素用于将特殊的效果添加到某些选择器。
语法:
伪元素的语法:
- 1
- 1
CSS 类也可以与伪元素配合使用:
- 1
- 1
- 1
- 2
- 1
- 2
:first-line
的使用方法:
- 1
- 2
- 3
- 1
- 2
- 3
first-line 伪元素仅能被用于块级元素。
下面的属性可以被应用到 first-line 伪元素:
font 属性
color 属性
background 属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
2.1多重伪元素
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
2.2 CSS2 - :before 伪元素
before
(>=IE8) 伪元素可用于在某个元素之前插入某些内容。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
2.3 CSS2 - :after 伪元素
after
(>=IE8) 伪类可用于在某个元素之后插入某些内容。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4