CSS中的伪类与伪元素——伪元素

EricLin
172 阅读3分钟 
欢迎回来，昨天我们讲了伪类的概念以及常用的伪类用法，今天我带来的的是关于伪元素及常用的伪元素的部分

2. 伪元素 ::Pseudo-element

伪元素 ::Pseudo-element是一个附加至选择器末的关键词，其功能是用来操作元素的特定部分

伪元素和伪类相似，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上加入 class 类

伪元素的表现和普通标签类似，都是HTML元素，但伪元素不以标签的形式编写，而是往往以 CSS 的方式编写。

mozilla是这样解释伪元素的：

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

伪类让你可以将样式应用于元素，不仅与文档树内容有关，也与外部因素有关

伪元素作用于元素的一部分：一个段落的第一行或者第一个字母

伪元素的语法： :: + 伪元素名称，例如下面这样

selector::pseudo-element {  /* 伪元素pseudo-element */
  property: "value";
}

以下是所有的伪元素

伪元素分类

结构
  • ::after (:after)
  • ::before (:before)
文本
  • ::cue (:cue)
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
选中
  • ::selection
  • ::slotted
语法
  • ::spelling-error
  • ::grammar-error 实验性的功能
  • ::marker 实验性的功能
  • ::placeholder 实验性的功能
  • ::backdrop 实验性的功能

常用的伪元素

  • 结构伪元素

    这类伪元素通俗来讲就是使用css样式标签外部也就是在元素内的外围模拟标签效果

    值得注意的是

    1. 结构伪元素必须给伪元素的样式设置content属性
    2. 伪元素默认为行内的显示模式

    • ::before, ::after

      ::before和::after伪元素顾名思义，就是特定的元素内之前或者之后

      重点是这个元素内，如果不加权重，这类伪元素所选择的特定元素最近的元素就是这两个伪元素，忽视其他标签元素

      可以抽象的理解为盒子模型的外部margin（相邻标签） 和内部padding（伪元素） 与box（选择的元素） 之间的关系

      <style>
    #box::before{
        content:"hello";    /* 1、必须有content属性 */
        color: slateblue;
        width: 100px;
        height: 100px;
        background-color: pink;
        display: block; /* 2、伪元素默认为行内的显示模式 */
    }
    #box::after{
        content:"world";
        color:green;
    }
    #box{
        height: 600px;
        border: 1px solid red;
    }
</style>
<body>
<div id="box">aaa</div>
</body>

  • 文本伪元素

    这类伪元素是对元素下的文本进行操作

    需要注意的是：

    文本伪元素只对元素下直接关联的文本生效，元素内嵌套其他标签的文本不生效

    • ::first-line

      顾名思义， ::first-line就是操控元素下的第一行文本

      有一个点比较值得注意：

      1. ::first-line元素下的第一行文本与字符数无关，与宽度有关，就是视觉上展现的第一行，一般可能会随着宽度的变化而变化
      <style>
    .para::first-line{  /* 无直接关联的文本*/
        color: salmon !important;   /* 对标签下的嵌套其他标签的文本无效 */
    }
    p::first-line{  /* 只对属性下直接关联的文本生效 */
        color: #449fdb;
    }
</style>
<body>
<div class="para">
<p>层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。</p>
<p> CSS 是开放 Web 的核心语言之一，并根据 W3C 规范在 Web 浏览器中进行了标准化。以前，CSS 规范的各个部分的开发是同步进行的，这种方式允许对最新推荐的 CSS 版本进行控制。你可能已经听说过 CSS1、CSS2.1 甚至 CSS3。但是以后将不会再有 CSS3 或者 CSS4；相反，现在的一切都是没有版本号的 CSS。</p>
</div>
</body>

    • ::first-letter

      同样顾名思义， ::first-letter就是操控元素下的第一个字符

      <style>
    .content::first-letter{
        font-size: 32px;
        color: indianred;
    }
</style>
<body>
<div class="content">
    <p>在学习了 CSS 语言基础知识的基础上，你需要关注的下一个重点是样式化文本</p>
</div>
</body>

今天关于伪元素的概念就讲到这里，明天我会总结伪类和伪元素的一些特点和区别，喜欢本文章的同学记得点个关注，follow我的专栏以获得第一时间的更新信息。

avatar
文章
阅读
粉丝