【CSS】伪元素与伪类-CSDN博客

CSS 伪元素和伪类

1.为什么要引入伪元素和伪类

在 CSS 的官方文档中是这样描述的

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on
information that lies outside the document tree.

意思是CSS 引入伪类和伪元素概念是为了格式化文档树以外的信息。即伪类和伪元素是用来修饰不在文档树种的部分。CSS 中没有比如“段落的第一行”、“文章首字母”之类的选择器而这些部分在一些业务场景中又是需要控制的这时候就需要用到伪元素和伪类了。

2.伪类和伪元素的概念以及作用

2.1 伪类

伪类是为处于某一状态的已有元素添加相应的样式而这个状态是根据用户的行为而动态改变的。

伪类一般用于以下场景

1. 设置鼠标悬停在元素上的样式
2. 为已访问和未访问链接设置不同的样式
3. 设置元素获得焦点时的样式
4. 为一串元素中的某些特定元素设置样式
5. …

2.2 伪元素

伪元素是用于创建一些不存在于文档树中的元素并为其添加指定的样式。即虽然用户可以看到这些元素但是这些元素实际上并不存在于文档树中这一点也是伪元素与伪类之间的本质区别

伪元素一般用于以下场景

1. 设置文本元素首字母、首行的样式
2. 在元素内容之前或之后插入内容
3. 设置滚动元素的滚动条样式
4. …

3.伪类

CSS 中的常用伪类可以分为以下几类

• 状态伪类
• 结构性伪类
• 表单相关
• 语言相关
• 其他

如下图

3.1 状态伪类

状态伪类即元素的样式会根据其状态的不同而呈现不同的样式当元素处于某一状态时应用该状态对应的样式而进入另一状态后该样式也不再生效。

常见的状态伪类有

• :link 应用于未被访问过的链接
• :hover 应用于鼠标悬停到的元素
• :active 应用于被激活的元素
• :visited 应用于被访问过的链接是一种与:link状态互斥的状态
• :focus 应用于拥有键盘输入焦点的元素。

需要注意的是**这几个伪类同时出现在一个元素的操作上顺序是固定的否则很大程度上会产生紊乱造成效果失效**具体来说:hover 必须在 CSS 定义中的 :link 和 :visited 之后才能生效。:active 必须在 CSS 定义中的 :hover 之后才能生效。

3.2 结构性伪类

结构性伪类是 CSS3 中新加入的元素选择器它通过对 DOM 树进行元素过滤用文档结构的相互关系来匹配元素能够减少 class 和 id 属性的定义使得文档结构更加简洁

常见的结构性伪类

1. :first-child 选择某个元素的第一个子元素
2. :last-child 选择某个元素的最后一个子元素
3. :nth-child(n) 匹配属于其父元素的第 n 个子元素不论元素的类型
4. :nth-last-child() 从这个元素的最后一个子元素开始算,选匹配属于其父元素的第 n 个子元素不论元素的类型
5. :nth-of-type() 规定属于其父元素的第 n 个指定类型元素
6. :nth-last-of-type() 从元素的最后一个开始计算,规定属于其父元素的指定类型元素
7. :first-of-type 选择一个上级元素下的第一个同类子元素
8. :last-of-type 选择一个上级元素的最后一个同类子元素
9. :only-child 选择它的父元素的唯一一个子元素
10. :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
11. :checked 匹配被选中的input元素这个input元素包括radio和checkbox。
12. :empty 选择的元素里面没有任何内容。
13. :disabled 匹配禁用的表单元素。
14. :enabled 匹配没有设置disabled属性的表单元素。
15. :valid 匹配条件验证正确的表单元素。
16. :in-range 选择具有指定范围内的值的 <input> 元素。
17. :optional 选择不带 required 属性的 <input> 元素。
18. :focus 选择获得焦点的 <input> 元素。

3.3 表单相关

有些伪类的使用常常与表单向关联

3.3.1 :checked

:checked — 匹配被选中的 input 元素这个 input 元素包括 radio 和 checkbox。

例当复选框被选中时与其相邻的<label> 元素的背景会变化

HTML

<input type="checkbox"/>
<label>agree</label>

CSS

/* 匹配选中状态input元素的相邻label元素 */
input:checked + label {
    background: yellow;
}

3.3.2 :default

:default — 匹配默认选中的元素

3.3.3 :disabled

:disabled — 匹配禁用的表单元素

例如这里我们将禁用的 input 元素置为红色

HTML

<input type="text" disabled/>

CSS

input:disabled {
    background-color: red;
}

3.3.4 :empty

:empty — 匹配没有子元素的元素。但凡元素中含有文本节点、HTML 元素或者一个空格:empty都不能匹配这个元素。

例

HTML

<div>这个容器里的背景是橙色的</div>
<div>  </div>
<div></div>
<div><!-- 注释不会被视作内容 --></div>

CSS

div {
    background: red;
    height: 30px;
    width: 200px;
}
 
div:empty {
    background: blue;
}

效果如下

可以看到第一个元素中有文本节点所以其背景不会变成蓝色第二个元素中有一个空格有空格则该元素不为空所以其背景不会变成蓝色第三个元素中没有任何内容所以其背景会变成蓝色第四个元素中只有一个注释此时该元素是空的所以其背景会变成蓝色

3.3.5 :enabled

与:disabled相反:enabled 匹配没有设置 disabled 属性的表单元素。

3.3.6 :in-range

:in-range 匹配在指定区域内元素。

例如

HTML

<input type="number" min="5" max="10">

CSS

input[type=number] {
    border: 5px solid orange;
}
 
input[type=number]:in-range {
    border: 5px solid green;
}

效果如下

可以看到当输入的数字在我们设定的范围 5 ~ 10 之间时边框变为绿色。

3.3.7 :out-of-range

:out-of-range 与 in-range 相反其用于匹配不在指定区域内的元素。

3.3.8 :indeterminate

indeterminate 的英文意思是“ 不确定的”。当某组中的单选框或复选框还没有选取状态时:indeterminate 可以匹配到该组中所有的单选框或复选框。

例

HTML

<ul>
    <li>
        <input type="radio" name="list" id="option1">
        <label for="option1">Option 1</label>
    </li>
    <li>
        <input type="radio" name="list" id="option2">
        <label for="option2">Option 2</label>
    </li>
    <li>
        <input type="radio" name="list" id="option3">
        <label for="option3">Option 3</label>
    </li>
</ul>

CSS

:indeterminate + label {
    background: red;
}

效果如下

可以看到当组中没有一个单选被选中时所有的单选都处于不确定的状态因此它们的label背景都为红色而当有一项被选中后所有单选的状态都确定了所以它们的背景都不会被设置为红色。

3.3.9 :valid

:valid 匹配条件验证正确的表单元素。

3.3.10 :invalid

:invalid 与:valid 相反匹配条件验证错误的表单元素。

3.3.11 :optional

:optional 匹配是具有 optional 属性的表单元素。当表单元素没有设置为 required 时即为 optional 属性。

3.3.12 :required

:required 与 :optional 相反匹配设置了 required 属性的表单元素。

3.3.13 :read-only

:read-only 匹配设置了只读属性的元素表单元素可以通过设置 readonly 属性来定义元素只读。

3.3.14 :read-write

:read-write 可以匹配处于编辑状态的元素。inputtextarea 和设置了 contenteditable 的HTML元素获取焦点时即处于编辑状态。

例

HTML

<input type="text" value="获取焦点时背景变黄"/>
 
<div class="editable" contenteditable>
    <h1>点击这里可以编辑</h1>
    <p>获取焦点时背景变黄</p>
</div>

CSS

:read-write:focus {
    background: yellow;
}

效果如下

可以看到在 input 框获取焦点时样式作用到了其身上。同时我们为div设置 contenteditable 属性后使其获取焦点时同样可以将样式作用到其身上。

3.3.15 :scope(处于试验阶段)

:scope 匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时style 内的样式会对整个 html 起作用。

---

以上就是常用的三类伪类至于其他两类在实际开发中的使用并不多这里就不作介绍了需要使用时可以查阅官方文档。

4.伪元素

常用的伪元素如下

1. ::after — 在元素之后插入内容。
2. ::before — 在元素之前插入内容。
3. ::first-letter — 选择元素的首字母只能作用于块级元素
4. ::first-line — 选择元素的首行只能作用于块级元素
5. ::selection — 选择用户选择的元素部分。
6. ::placeholder — 匹配占位符的文本只有元素设置了 placeholder 属性时该伪元素才能生效。但需要注意的是该伪元素不是 CSS 的标准它的实现可能在将来会有所改变所以要决定使用时必须谨慎。

下面就拿最为常用的两个伪元素 ::after 和 ::before 来举个例子

<style lang="less" scoped>
.btn_block {
  position: relative;
  .block {
    position: absolute;
    bottom: 55px;
    left: -40px;
    width: 200px;
    height: 200px;
    background: skyblue;
  }
  .block::after {
    content: '这里是after伪元素';
    position: absolute;
    top: 100%;
    left: 18%;
    // background: orange;
    border-width: 10px;
    border-style: solid;
    border-color: orange transparent transparent transparent;
  }
}
/* 这里用了iview组件库的Modal组件其类名为 ivu-modal */
:deep(.ivu-modal::before) {
  content: '1111111111111';
  background: skyblue;
}
:deep(.ivu-modal::after) {
  content: url(../../assets/icons/uploadBtn.png);
}
</style>
<template>
<div class="btn_block">
    <button @mouseenter="isShowBlock = true" @mouseleave="isShowBlock = false">
        hover to show block
    </button>
    <div class="block" v-show="true">this is a block!</div>
</div>
<div class="btn_modal">
    <button>click to show modal</button>
    <Modal v-model="isShowModal"> 11111 </Modal>
</div>
</template>
<script>
export default {
    data() {
        return {
            isShowBlock: false,
            isShowModal: false,
        }
    }
}
</script>

效果如下

可以看到我们在这里通过::after 和 ::before能够为元素的前方、后方添加原本不存在于文档流中的元素。另外需要注意的是虽然通过这样的方式在元素前后方添加元素很方便且的确能够向伪元素身上添加事件但是仍然是比较麻烦的如果要添加的元素与交互相关那么尽量还是通过实际元素来实现而伪元素则用来做一些修饰性的工作。

参考文档

An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements