CSS 伪类和伪元素的区别以及详解o((＞ω＜ ))o

CSS 伪类和伪元素的区别以及详解

---

一、伪类🛸

关于伪类的定义，先来看看在 CSS3 建议文档是怎么说的：

• 伪类存在的意义是为了通过选择器找到那些 ①不存在于DOM树中的信息 以及 ②不能被常规CSS选择器获取到的信息
• 伪类由一个冒号 : 开头，冒号后面是伪类的名称和包含在圆括号的可选参数。
• 任何常规选择器都可以在任何位置使用伪类。
• 一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

😃第一句话基本上已经把伪类的定义给解释出来了，伪类无非就两种功能：

1. 获取不存在DOM树的信息，最典型的有 a标签。

   a 标签有四种伪类（对应四种状态），优先级：L > V > H > A
   为了方便记忆，出现了 爱恨准则: LoVe HAte

   伪类	中文释义	用法
   a:link{}	链接	在超链接点击之前
   a:visited{}	访问过的	在超链接点击之后
   a:hover{}	悬停	鼠标放到超链接上的时候
   a:active{}	活跃	鼠标点击超链接且不松手的时候

   HTML

   <div>
       <p>
           <a href="#" class="active">链接</a>
       </p>
   </div>
   

   CSS

   .active:link{           /* 点击前 */
       color: orange;
   }
   .active:visited{        /* 点击后 */
       color: purple;
   }
   .active:hover{          /* 悬停时 */
       color: red;
   }
   .active:active{
       color: teal;        /* 点击不松开时 */
   }
   

2. 获取不能被常规选择器获取的信息，就比如伪类 :target。

   伪类	中文释义	用法
   a:target {}	目标	匹配当前URL目标的元素

   简单来说，:target 这个伪类用来改变页面中锚链接URL所指向的元素样式。举个栗子，使用 :target 伪类可以实现无 JavaScript 的标签切换效果。

   HTML

   <div class="tablist">
       <ul class="tabmenu">
           <li><a href="#tab1">标签一</a></li>
           <li><a href="#tab2">标签二</a></li>
           <li><a href="#tab3">标签三</a></li>
       </ul>
       <div class="tab_content">
           <div id="tab1">tab1 内容</div>
           <div id="tab2">tab2 内容</div>
           <div id="tab3">tab3 内容</div>
       </div>
   </div>
   

   CSS

   .tablist {
      width: 300px;
      margin: 0 auto;
      font-weight: bold;
   }
   .tablist .tabmenu {
      width: 100%;
      margin: 0 0 20px 10px;
      overflow: hidden;
   }
   .tablist .tabmenu li {
      width: 80px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 10px;
      margin-right: 20px;
      background-color: orange;
      float: left;
   }
   .tab_content {
      height: 200px;
      line-height: 200px;
      text-align: center;
      border: 1px solid #000000;
   }
   /* target伪类 使用 */
   .tab_content div {
      display: none;
   }
   #tab1:target, #tab2:target, #tab3:target {
      display: block;
   }	
   

第二、三句话是对使用伪类的描述，第四句话简单来说对DOM树增删改查时，只要伪类选择器能选上同样是有效的。

在MDN上只用了一句话对其描述：

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

😃MDN对伪类的描述也很生动，伪类帮助我们减少了许多不必要的类，代码冗余减少的同时也更加方便。比如常用的伪类 :nth-child()，nth-of-type() 这些都是灵活的代表。

html

    <ul class="item-list">
        <h2>Title</h2>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

css :nth-child()

.item-list li {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: #07c99e;
    font-size: 40px;
    text-align: center;
    float: left;
}
/* 选取item-list下的第六个元素子点 */
.item-list li:nth-child(6) {
    color: #ffffff;
    background-color: #ff7f50;
}

css :nth-of-type()

.item-list li {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: #07c99e;
    font-size: 40px;
    text-align: center;
    float: left;
}
/* 选取item-list下的第五个li */
.item-list li:nth-of-type(5) {
    color: #ffffff;
    background-color: #ff7f50;
}

---

二、伪元素

相对于伪类，伪元素的成员就没这么多了，但伪元素也是十分使用便捷，其中的 ::after 和 ::before 伪元素更是好评如潮。

在CSS3 建议文档中对伪元素的描述比较多：

• 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言的（DOM文档树），比如：document 接口不提供访问元素内容的第一个字或者是第一行的机制，而伪元素可以使开发者提取到这些信息。并且，一些伪元素可以使开发者获取到不存在源文档的内容，有就是上面提到过的 ::after 和 ::before 。
• 伪元素由两个冒号 :: 开头，后面跟着伪元素的名称。
• 使用两个冒号 ::是为了区别伪类和伪元素，在CSS2中并没有区别，当然考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号的写法，但是在CSS3中新增的伪元素必须使用两个冒号。
• 一个选择器只能使用一个伪元素，且伪元素名称处于选择器语句的最后。

😃与伪类一样，第一句话就是伪元素最直观的介绍，这也是伪类和伪元素最大的区别。简单来说，伪元素创建了一个虚拟的容器，这个容器不包含任何的DOM元素，但可以包含内容（content样式属性），另外开发者还能伪伪元素定制样式。
其余几句话更多是对伪元素如何使用的描述

而在MDN中的描述就比较简短：

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。

---

三、参考表

偷个懒，这里直接引用MDN文档下的表格，每个选择器链接到了MDN上它们的参考页，大家可以去查阅。

伪类

选择器	描述
:active	在用户激活（例如点击）元素的时候匹配。
:any-link	匹配一个链接的:link和:visited状态。
:blank	匹配空输入值的``元素。
:checked	匹配处于选中状态的单选或者复选框。
:current (en-US)	匹配正在展示的元素，或者其上级元素。
:default	匹配一组相似的元素中默认的一个或者更多的UI元素。
:dir	基于其方向性（HTMLdir属性或者CSSdirection属性的值）匹配一个元素。
:disabled	匹配处于关闭状态的用户界面元素
:empty	匹配除了可能存在的空格外，没有子元素的元素。
:enabled	匹配处于开启状态的用户界面元素。
:first	匹配分页媒体的第一页。
:first-child	匹配兄弟元素中的第一个元素。
:first-of-type	匹配兄弟元素中第一个某种类型的元素。
:focus	当一个元素有焦点的时候匹配。
:focus-visible	当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within	匹配有焦点的元素，以及子代元素有焦点的元素。
:future (en-US)	匹配当前元素之后的元素。
:hover	当用户悬浮到一个元素之上的时候匹配。
:indeterminate	匹配未定态值的UI元素，通常为复选框。
:in-range	用一个区间匹配元素，当值处于区间之内时匹配。
:invalid	匹配诸如<input>的位于不可用状态的元素。
:lang	基于语言（HTMLlang属性的值）匹配元素。
:last-child	匹配兄弟元素中最末的那个元素。
:last-of-type	匹配兄弟元素中最后一个某种类型的元素。
:left	在分页媒体 (en-US)中，匹配左手边的页。
:link	匹配未曾访问的链接。
:local-link (en-US)	匹配指向和当前文档同一网站页面的链接。
:is()	匹配传入的选择器列表中的任何选择器。
:not	匹配作为值传入自身的选择器未匹配的物件。
:nth-child	匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。
:nth-of-type	匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇数个）。
:nth-last-child	匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:nth-last-of-type	匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:only-child	匹配没有兄弟元素的元素。
:only-of-type	匹配兄弟元素中某类型仅有的元素。
:optional	匹配不是必填的form元素。
:out-of-range	按区间匹配元素，当值不在区间内的的时候匹配。
:past (en-US)	匹配当前元素之前的元素。
:placeholder-shown	匹配显示占位文字的input元素。
:playing (en-US)	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused (en-US)	匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:read-only	匹配用户不可更改的元素。
:read-write	匹配用户可更改的元素。
:required	匹配必填的form元素。
:right	在分页媒体 (en-US)中，匹配右手边的页。
:root	匹配文档的根元素。
:scope	匹配任何为参考点元素的的元素。
:valid	匹配诸如<input>元素的处于可用状态的元素。
:target	匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的元素）。
:visited	匹配已访问链接。

伪元素

选择器	描述
::after	匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before	匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter	匹配元素的第一个字母。
::first-line	匹配包含此伪元素的元素的第一行。
::grammar-error	匹配文档中包含了浏览器标记的语法错误的那部分。
::selection	匹配文档中被选择的那部分。
::spelling-error	匹配文档中包含了浏览器标记的拼写错误的那部分。

---

参考资料🎀

• 官方手册
  • CSS3 官方文档
  • MDN Web Docs 伪类和伪元素
    
• 参考文献
  • CSS3伪类和伪元素的特性和区别

相关博客✨

• JavaScript 编写Date 格式化方法『Python风格』