CSS3 伪元素和伪类

最新推荐文章于 2024-04-17 10:43:16 发布

cithegod

最新推荐文章于 2024-04-17 10:43:16 发布

阅读量758

点赞数

分类专栏： CSS 文章标签： css3 css

本文链接：https://blog.csdn.net/cithegod/article/details/76207069

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS伪类/伪元素

CSS伪类和伪元素的区别，在CSS3中，实际上的伪元素应该只有::before和::after两个了，这两个元素是实际存在在DOM中的，而类本身就是表示元素的状态，所以伪类应该也是为了表示元素的状态的。

在CSS3中，可以直接用::还是:来区分伪类和为元素了。

功能

由于伪类主要是表示元素的状态，那么伪类的主要功能也就是为元素添加样式的，伪类可以分为下面几种：

链接伪类

在CSS刚出来的时候，最经常使用的伪类应该就是:active等为链接添加样式的伪类了。表示链接的当前状态，激活、已被访问过等等，这些伪类基于链接当前已经被进行过的操作，来在样式上对用户进行反馈。

事件伪类

有一些DOM事件也会触发伪类，比如当鼠标划过一个元素时候会触发的:hover伪类，比如当一个元素获得焦点时候的:focus伪类，比如当一个checkbox被勾选时候的:checked伪类，这些伪类的触发基本上都和DOM事件有一定的关系。

伪类选择器

有一些伪类完全是为了进行元素选择而使用的。比如经常使用的几个子选择器：

:first-child：选择其父元素的第一个该类型子元素。比如ul > li:first-child就会选择到一个无序列表的第一个li元素。

<style>
/* 这样只会选择到无序列表的第一个子元素，不会选择有序列表的元素 */
  ul>li:first-child {
    color: lightsalmon;
  }
</style>
<ul>
  <li>unorder list 1</li>
  <li>unorder list 2</li>
</ul>
<ol>
  <li>order list 1</li>
  <li>order list 2</li>
</ol>

:nth-child(n)：这个选择器会选择其父元素的第n个该类型子元素。这里面的n可以是大于0的自然数或者是含有n的表达式，如果是表达式的话，则表达式内部n的取值为大于等于0的自然数，也就是说：ul > li:nth-child(2n+3)会选择到ul的第3、5、7、9….个子li元素的。
:only-child：这个选择器选择其父元素的唯一的该类型子元素，也就是其父元素只能够有一个子元素，这个子元素的类型和伪类前面指示的类型相同。
:first-of-type：表示某个元素的子元素中每一个类型的第一个元素。比如：

<style>
  /* 由于中间的空格，这里会选择到第一个span和第一个em */
  div :first-of-type {
    background: lightblue;
  }
  /* 这样只会选择到第一个span元素 */
  div > span:first-of-type {
    background: lightblue;
  }
</style>
<div>
  <span>This span will be choosen</span>
  <span>This span will not be choosen</span>
  <em>This em will be choosen</em>
</div>

:not()否定选择器，选择所有在前提条件下不符合否定选择器内部内容的元素。这个选择器可以和其他的选择器组合，来实现稍微复杂一点的选择器功能。
比如，需要选择一个无序列表中除了最后一个元素之外的其他元素：这样就可以实现了，这样的实现的效果和下面的效果一样。

/* 下面第一组CSS选择器得到的效果和后面两组选择器结合得到的效果是一样的 */

ul > li:not(:last-child) {
  background: lightblue;
}
ul > li {
  background: lightblue;
}
ul > li:last-child {
  background: white;
}

伪类选择器的组合基本可以实现大多数的元素选择效果，选择器叠加也可以产生很多的选择效果。

伪元素

伪元素在CSS3中和伪类有着明显的区别，伪元素使用两个冒号来作为开始，其中最常用的两个伪元素是::before和::after伪元素，这两个伪元素主要是用来在一个元素的前面或者后面添加一个元素的。而::first-letter和::first-line两个伪元素还是主要用于选择，来选择一段文本的第一个字符或者第一行。

如果为了兼容性(虽然现在大部分网站都放弃了IE8的支持)，可以使用CSS2中的单冒号伪元素写法，但是在MDN上还是建议使用新的双冒号写法更容易区分。

`::first-letter`&`::first-line`

这两个伪元素选择器看起来和伪类选择器没有什么太大的区别，但是这两个选择器匹配的其实不是在DOM中真实存在的元素，是将一个文本块作为其选择的元素，然后为其添加样式的。

当前版本中，只有一部分CSS可以对于这两个伪元素进行使用。

其本质上就相当于动态地构建一个假的DOM元素，并且将第一个字符或者是第一行文本放入这个元素中并且为其应用样式。

下面的代码可以得到每一段本文首字母都会放大并且首行行高变成两倍的效果。

<style>
  article > p::first-letter {
    font-size: 2em;
  }
  article > p::first-line {
    line-height: 2em;
  }
</style>
<article>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eos qui ab pariatur, iure itaque modi ut, cupiditate beatae omnis. Alias sit sequi aliquid ad dolore, non autem nisi aperiam.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, modi. Corrupti animi, cumque doloremque eveniet impedit veniam iure recusandae, distinctio, adipisci ea illo magnam non, cum omnis ad! Excepturi, est!
  </p>
</article>