css 伪类和伪元素
1. 伪类与伪元素
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释：
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
2. 伪类与伪元素的区别
这里通过两个例子来说明两者的区别。
下面是一个简单的html列表片段：
<ul>
<li>我是第一个</li>
<li>我是第二个</li>
</ul>
如果想要给第一项添加样式，可以在为第一个<li>添加一个类，并在该类中定义对应样式：
HTML:
<ul>
<li class="first-item">我是第一个</li>
<li>我是第二个</li>
</ul>
CSS:
li.first-item {color: orange}
如果不用添加类的方法，我们可以通过给设置第一个<li>的:first-child伪类来为其添加样式。这个时候，被修饰的<li>元素依然处于文档树中。
HTML:
<ul>
<li>我是第一个</li>
<li>我是第二个</li>
</ul>
CSS:
li:first-child {color: orange}
下面是另一个简单的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个<span>元素，并设置该span元素的样式：
HTML:
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
CSS:
.first {font-size: 5em;}
如果不创建一个<span>元素，我们可以通过设置<p>的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的<span>元素并添加了样式，但实际上文档树中并不存在这个<span>元素。
HTML:
<p>Hello World, and wish you have a good day!</p>
CSS:
p:first-letter {font-size: 5em;}
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
伪类和伪元素混淆的由来
最为混淆的，可能是大部分人都将 :before 和 :after 这样的伪元素随口叫做伪类，而且即使在概念混淆的情况下，实际使用上也毫无问题——因为即使概念混淆，对真正使用也不会造成多少麻烦:)
CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。
伪类与伪元素的用法
伪类
1 :link 选择未访问的链接
2 :visited 选择已访问的链接
3 :hover 选择鼠标指针浮动在其上的元素
4 :active 选择活动的链接
5 :focus 选择获取焦点的输入字段
:first - child 伪类
匹配元素的第一个子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:first-child {
color: orange;
}
</style>
<body>
<ul>
<li>这里的文本是橙色的</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:not 伪类
一个否定伪类，用于匹配不符合参数选择器的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:not(.first-item) {
color: orange;
}
</style>
<body>
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:lang 伪类
:lang匹配设置了特定语言的元素，设置特定语言可以通过为了HTML元素设置lang=””属性，设置meta元素的charset=””属性，或者是在http头部上设置语言属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
</style>
<body>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
</body>
</html>伪元素
::before/:before 伪元素
:before在被选元素前插入内容。需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
h1:before {
content: "Hello ";
}
</style>
<body>
<h1>World</h1>
</body>
</html>::after/:after 伪元素
:after在被元素后插入内容，其用法和特性与:before相似。
::first-letter/:first-letter 伪元素
:first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
h1:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
<body>
<h1>World 观察第一个字母</h1>
</body>
</html>::first-line/:first-line 伪元素
:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
p:first-line {
background: orange;
}
</style>
<body>
<p>Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }，
to set them apart from pseudo-classes. You may see this sometimes in CSS.
CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility，
and we would advise that you stick with this syntax for the time being.</p>
</body>
</html>
哈哈哈
明白了一点点
8年前 添加回复 0