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

Posted XianZhe_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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匹配文档中包含了浏览器标记的拼写错误的那部分。

参考资料🎀

相关博客✨

以上是关于CSS 伪类和伪元素的区别以及详解o((＞ω＜ ))o的主要内容，如果未能解决你的问题，请参考以下文章

CSS3伪类和伪元素的特性和区别

浅谈css伪类和伪元素的区别、优先级

伪类选择器，伪类和伪元素的区别

伪类和伪元素的区别

伪类和伪元素的区别

伪类和伪元素的区别