概览

在前端开发中,使用伪元素可以使我们的文档结构更加简洁。::before::after 匹配一个虚拟元素,主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的 content 属性,默认是内联元素。

伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于 id、class、属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素)。

伪类

根据 W3CCSS 伪类用于向某些选择器添加特殊的效果。

伪类用于选择 DOM 树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited:active;后者包含那些满足一定逻辑条件的 DOM 树中的元素,比如:first-child:first-of-type:target

伪类统一以:(单冒号)开头。

伪类一览表

属性 描述 CSS 版本
::first-letter 选择指定元素的第一个单词 1
::first-line 选择指定元素的第一行 1
::after 在指定元素的内容前面插入内容 2
::before 在指定元素的内容后面插入内容 2
::selection 选择指定元素中被用户选中的内容 3

伪元素

伪元素为 DOM 树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。

比如::before 表示选择元素内容的之前内容,也就是""(默认空);::selection 表示选择元素被选中的内容。

伪元素标准写法以::(双冒号)开头。

有时候发现单冒号写法也能正常显示,因为 CSS2 是使用单冒号的,CSS3 出来了为了区分伪类和伪元素所以才用双冒号表示,所以,如果你的网站只需要兼容 webkit、firefox、opera 等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。

伪元素一览表

属性 描述 CSS 版本
:active 选择正在被激活的元素 1
:hover 选择被鼠标悬浮着元素 1
:link 选择未被访问的元素 1
:visited 选择已被访问的元素 1
:first-child 选择满足是其父元素的第一个子元素的元素 2
:lang 选择带有指定 lang 属性的元素 2
:focus 选择拥有键盘输入焦点的元素 2
:enable 选择每个已启动的元素 3
:disable 选择每个已禁止的元素 3
:checked 选择每个被选中的元素 3
:target 选择当前的锚点元素 3
:first-of-type 选择满足是其父元素的第一个某类型子元素的元素 3
:last-of-type 选择满足是其父元素的最后一个某类型子元素的元素 3
:only-of-type 选择满足是其父元素的唯一一个某类型子元素的元素 3
:nth-of-type(n) 选择满足是其父元素的第 n 个某类型子元素的元素 3
:nth-last-of-type(n) 选择满足是其父元素的倒数第 n 个某类型的元素 3
:only-child 选择满足是其父元素的唯一一个子元素的元素 3
:last-child 选择满足是其父元素的最后一个元素的元素 3
:nth-child(n) 选择满足是其父元素的第 n 个子元素的元素 3
:nth-last-child(n) 选择满足是其父元素的倒数第 n 个子元素的元素 3
:empty 选择满足没有子元素的元素 3
:in-range 选择满足值在指定范围内的元素 3
:out-of-range 选择值不在指定范围内的元素 3
:invalid 选择满足值为无效值的元素 3
:valid 选择满足值为有效值的元素 3
:not(selector) 选择不满足 selector 的元素 3
:optional 选择为可选项的表单元素,即没有 “required” 属性 3
:read-only 选择有"readonly"的表单元素 3
:read-write 选择没有"readonly"的表单元素 3
:root 选择根元素 3

完整实例

简洁 html 文档,将需要手动为每个对象之后添加 “,” 符号以 ul 元素来增加,而不是每个 “,” 都占用一个 ul 元素,以下两种方式最终前端显示一致,但目标文档区域会更加简洁。

原始需求

<style>
    ul{
        list-style: none;
    }
    li{
        display: inline;
    }
</style>
<ul>
    <li>
        第一个
    </li>
    <li>
        , 
    </li>
    <li>
        第二个
    </li>
    <li>
        , 
    </li>
    <li>
        第三个
    </li>
    <li>
        , 
    </li>
    <li>
        第四个
    </li>
    <li>
        , 
    </li>
    <li>
        第五个
    </li>
</ul>

需求优化

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        ul{
            list-style: none;
        }
        li{
            display: inline;
        }
        li:not(:last-child)::after{
            content: ", ";
        }
</style>
</head>
<body>
    <ul>
        <li>
            第一个
        </li>
        <li>
            第二个
        </li>
        <li>
            第三个
        </li>
        <li>
            第四个
        </li>
        <li>
            第五个
        </li>
    </ul>

</body>
</html>

再次尝试

元素::after::before 的使用很简单,可以认为其所在元素上存在一前一后的两个的元素,这两个元素默认是内联元素,但我们可以为其增添样式。

使用::after::before 的时候一定要注意,必须设置 content,否则这两个伪元素是无法显示出来的。而 content 属性,会作为这两个伪元素的内容嵌入他们中。

<style>
    p:before{
        content: "he";
    }
    p:after{
        content: ".cn";
    }
</style>
<p>xingxing</p>

以上实例中最终在前端将显示 hexingxing.cn

常见的::after::before 是虚拟元素,不会影响真正元素的所在文档的位置,对:first-child 或者:last-child 这种伪类选择不会造成影响。

常用元素

::first-letter

伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式,通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是,伪元素 ::first-letter 仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。

::first-line

伪元素 ::first-line 用来设置指定元素中内容第一行的样式,与 ::first-letter 类似,伪元素 ::first-line 也仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。

::selection

伪元素 ::selection 用来设置对象被选中时的样式,需要注意的是,伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定义该属性)等属性。

::placeholder

伪元素 ::placeholder 用来设置表单元素的占位文本


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注