CSS伪类和伪元素
1、伪类
CSS伪类用于向某些选择器添加特殊的效果，
在W3规范中，CSS伪类有以下几个：
CSS2.1
:active：向被激活的元素添加样式（激活是指点击鼠标那一下）
:focus：向拥有键盘输入焦点的元素增长样式
:hover：当鼠标悬浮在元素上方时，向元素增长样式
:link：向未被访问的连接增长样式
:visited：向已被访问的连接增长样式
:first-child：向元素的第一个子元素增长样式
:lang：向带有指定lang属性的元素增长样式
CSS3中的伪类（注意CSS3级别的伪类可能缺少浏览器支持，可能要准备相应的JS支持）：
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
提示：
一、伪类名称对大小写不敏感。好比：ACTIVE,Active，active都是合法的。
二、l v h a原则。按照 link 、visited、hover、active 的顺序来写。
三、在IE中必须声明<!DOCTYPE>，first-child伪类才会生效
四、伪类后面还可接选择器
疑问：
对于first-child伪类，看下面的解释：
一、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>标签是做为它的父元素的第一个元素。
二、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>不是第一个子元素，因此不会被选择器选中，颜色不会变成绿色。
三、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>
效果：
2、伪元素
W3C规范中有4个伪元素：
CSS-1
:first-line
向文本的第一行添加样式
:first-letter
向文本的第一个字母添加特殊样式
CSS-2:
:after 在元素以后添加内容
:before 在元素以前添加内容
提示：
一、CSS3中规定伪元素的写法是要用两个冒号的，好比，::first-line，可是因为一些IE浏览器不支持，因此如今变得既能够用两个冒号，也能够用用一个冒号。
二、另外，:after和:before会在元素中添加内容，具体的方式相似于：
p:after{ content:"内容";}
三、同一个标签可使用多重伪元素，好比：
p:first-line{ color:red;}p:first-letter{ color:yellow;}
其中，若是同时出现first-line，first-letter，而且相互有冲突的属性，那么会按照first-letter里面的属性来设置冲突的那些属性，而不是看其出现的前后顺序。例如上例中，第一行的第一个字母（中文是第一个字）的颜色应该为黄色。
3、伪类和伪元素的区别
一、伪类一开始单单只是用来表示一些元素的动态状态，典型的就是连接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了全部逻辑上存在但在文档树中却无须标识的“幽灵”分类。
二、伪元素则表明了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
三、伪元素在一个选择器中只能出现一次，而且只能出如今末尾。
相关文章
- 1. css伪类和伪元素
- 2. CSS伪类和伪元素
- 3. css—伪类和伪元素
- 4. CSS 伪类与伪元素
- 5. CSS伪类与伪元素
- 6. css伪类与伪元素
- 7. CSS 伪类 伪元素
- 8. CSS——伪元素与伪类
- 9. 【CSS】伪类与伪元素
- 10. css伪类和伪元素的学习
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • 如何伪造ARP响应？ - TCP/IP教程
- • Kotlin学习（二）基本类型
- • IntelliJ IDEA 代码格式化配置和快捷键
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. css伪类和伪元素
- 2. CSS伪类和伪元素
- 3. css—伪类和伪元素
- 4. CSS 伪类与伪元素
- 5. CSS伪类与伪元素
- 6. css伪类与伪元素
- 7. CSS 伪类 伪元素
- 8. CSS——伪元素与伪类
- 9. 【CSS】伪类与伪元素
- 10. css伪类和伪元素的学习