CSS伪类和伪元素
浏览数：30 /
时间：2015年06月09日
一、伪类
CSS伪类用于向某些选择器添加特殊的效果，在W3C规范中，CSS伪类有如下几个：
:active：向被激活的元素添加样式（激活是指点击鼠标那一下）
:focus：向拥有键盘输入焦点的元素增加样式
:hover：当鼠标悬浮在元素上方时，向元素增加样式
:link：向未被访问的链接增加样式
:visited：向已被访问的链接增加样式
:first-child：向元素的第一个子元素增加样式
:lang：向带有指定lang属性的元素增加样式
提示：
1、伪类名称对大小写不敏感。比如：ACTIVE,Active，active都是合法的。
2、l v h a原则。按照 link 、visited、hover、active 的顺序来写。
3、在IE中必须声明<!DOCTYPE>，first-child伪类才会生效
4、伪类后面还可接选择器
疑问：
对于first-child伪类，看下面的解释：
1、p:first-child 匹配第一个<p>元素，选择器匹配作为任何元素的第一个子元素的 p 元素，如果<p>元素不是第一个，则无效。
成功的例子：
html:
<body><p>哈哈哈</p><p><i>AAA</i><i>bbb</i></p><p><i>CC</i><i>DD</i></p><p lang="en">呵呵</p></body>
css:
p:first-child{color: yellow;}
效果：
其他<p>标签内的元素不改变颜色。
失败的例子：
html:
<body><span></span><p>哈哈哈</p><p><i>AAA</i><i>bbb</i></p><p><i>CC</i><i>DD</i></p><p lang="en">呵呵</p></body>
css:
p:first-child{color: yellow;}
效果：
没有一个<p>标签内的颜色改变为黄色，因为没有一个<p>标签是作为它的父元素的第一个元素。
2、p>i:first-child 匹配所有<p>元素的第一个<i>元素 选择器匹配所有 <p> 元素中的第一个 <i> 元素，如果<i>元素不是第一个则无效。
成功的例子：
html:
<body><p><span>哈哈哈哈哈</span><i>呵呵</i>哈哈哈<i>呵呵</i></p><p><i>AAA</i><i>bbb</i></p><p><i>CC</i><i>DD</i></p><p lang="en">呵呵</p></body>
css:
p>i:first-child{color: green;}
效果：
，第一个<p>标签内，由于<i>不是第一个子元素，所以不会被选择器选中，颜色不会变成绿色。3、p:first-child i 匹配所有作为第一个子元素<p>中的所有<i>元素 选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素
成功的例子：
html：
<body><p><span>哈哈哈哈哈</span><i>呵呵</i>哈哈哈<i>呵呵</i></p><p><i>AAA</i><i>bbb</i></p><p><i>CC</i><i>DD</i></p><p lang="en">呵呵</p></body>
css:
p:first-child i{color: red;}
效果：
其他<p>标签不会被选中，颜色不会变成红色。对于lang伪类，看下面的例子：
css
p:lang(en){color: red;}
html:
<p lang="en">呵呵</p>
效果：
二、伪元素
W3C规范中有4个伪元素：
CSS-1
:first-line 向文本的第一行添加样式
:first-letter 向文本的第一个字母添加特殊样式
CSS-2:
:after 在元素之后添加内容
:before 在元素之前添加内容
提示：
1、CSS3中规定伪元素的写法是要用两个冒号的，比如，::first-line，但是由于一些IE浏览器不支持，所以现在变得既可以用两个冒号，也可以用用一个冒号。
2、另外，:after和:before会在元素中添加内容，具体的方式类似于：
p:after{content:"内容";}
3、同一个标签可以使用多重伪元素，比如：
p:first-line{color:red;}p:first-letter{color:yellow;}
其中，如果同时出现first-line，first-letter，并且相互有冲突的属性，那么会按照first-letter里面的属性来设置冲突的那些属性，而不是看其出现的先后顺序。例如上例中，第一行的第一个字母（中文是第一个字）的颜色应该为黄色。
三、伪类和伪元素的区别
1、伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
2、伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
3、伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
