标签：style blog http color 使用 os for ar
一、伪类
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
效果：
二、伪元素
W3C规范中有4个伪元素：
CSS-1
:first-line 向文本的第一行添加样式
:first-letter 向文本的第一个字母添加特殊样式
CSS-2:
:after 在元素之后添加内容
:before 在元素之前添加内容
提示：
1、CSS3中规定伪元素的写法是要用两个冒号的，比如，::first-line，但是由于一些IE浏览器不支持，所以现在变得既可以用两个冒号，也可以用用一个冒号。
2、另外，:after和:before会在元素中添加内容，具体的方式类似于：
p:first-line{ color:red;}p:first-letter{ color:yellow;}
其中，如果同时出现first-line，first-letter，并且相互有冲突的属性，那么会按照first-letter里面的属性来设置冲突的那些属性，而不是看其出现的先后顺序。例如上例中，第一行的第一个字母（中文是第一个字）的颜色应该为黄色。
三、伪类和伪元素的区别
1、伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
2、伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
3、伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
CSS伪类和伪元素,布布扣,bubuko.com
CSS伪类和伪元素
标签：style blog http color 使用 os for ar
原文地址：http://www.cnblogs.com/iceseal/p/3915750.html
