CSS的伪类和伪元素
定义
伪类:
CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。
例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
/* 所有用户指针悬停的按钮 */button:hover {color: blue;}
伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。
伪元素:
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
下例中的 ::first-line 伪元素可改变段落首行文字的样式。
/* 每一个 <p> 元素的第一行。 */p::first-line {color: blue;text-transform: uppercase;}
伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。
分类：
伪类：
- :active，将样式添加到被激活的元素。
- :focus，将样式添加到被选中的元素。
- :hover，当鼠标悬浮在元素上方是，向元素添加样式。
- :link，将特殊的样式添加到未被访问过的链接。
- :visited，将特殊的样式添加到被访问的链接。
- :first-child，将特殊的样式添加到元素的第一个子元素。
- :lang，允许创作者来定义指定的元素中使用的语言。
伪元素：
- :first-letter，将特殊的样式添加到文本的首字母。
- :first-line，将特殊的样式添加到文本的首行。
- :before，在某元素之前插入某些内容。
- :after，在某元素之后插入某些内容。
区别：
下面是一个简单的html列表片段：
<ul><li>我是第一列</li><li>我是第二列</li></ul>
如果想要给第一项添加样式，可以在为第一个添加一个类，并在该类中定义对应样式：
<ul><li class="first-item">我是第一列</li><li>我是第二列</li></ul>li.first-item {color: orange}
如果不用添加类的方法，我们可以通过给设置第一个的:first-child伪类来为其添加样式。这个时候，被修饰的元素依然处于文档树中。
li:first-child {color: orange}
下面是另一个简单的html段落片段：
<p>Hello World, and wish you have a good day!</p>
如果想要给该段落的第一个字母添加样式，可以在第一个字母中包裹一个元素，并设置该span元素的样式：
<p><span class="first">H</span>ello World, and wish you have a good day!</p>.first {font-size: 5em;}
如果不创建一个元素，我们可以通过设置
的:first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。
<p>Hello World, and wish you have a good day!</p>p:first-letter {font-size: 5em;}
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
总结:
- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素；
迈不过友情╰
红太狼
忘是亡心i
还没有评论，来说两句吧...