mirror of
https://github.com/ZiuChen/ZiuChen.github.io.git
synced 2025-08-17 23:19:55 +08:00
190 lines
5.8 KiB
Markdown
190 lines
5.8 KiB
Markdown
# 一文读懂伪类与伪元素
|
||
|
||
## 🔰 什么是伪类？
|
||
|
||
伪类是添加到选择器的 **关键字** ，指定要选择的元素的特殊状态。
|
||
|
||
### 典型的伪类关键字
|
||
|
||
在大多数情况下，**伪类都与基础选择器搭配使用**，下述是伪类在一些典型场景下的应用。
|
||
|
||
#### `:hover`
|
||
|
||
指针在 `<button>` 上悬停，但没有激活它时，按钮颜色变为蓝色
|
||
|
||
```css
|
||
button:hover {
|
||
color: blue;
|
||
}
|
||
```
|
||
|
||
> **注意**: 在触摸屏上 `:hover` 基本不可用。不同的浏览器上`:hover` 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
|
||
|
||
#### `:not`
|
||
|
||
**`:not()`** 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为*反选伪类*（*negation pseudo-class*）。
|
||
|
||
将所有不是`<p>`的元素颜色改为蓝色：
|
||
|
||
```css
|
||
body:not(p) {
|
||
color: blue;
|
||
}
|
||
|
||
/* 实测下述代码没有效果 */
|
||
:not(p) {
|
||
color: blue;
|
||
}
|
||
```
|
||
|
||
> **注意**: 在触摸屏上 `:hover` 基本不可用。不同的浏览器上`:hover` 伪类表现不同。网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
|
||
|
||
#### `:first-child`
|
||
|
||
给所有 `<ul>` 下的第一个 `<li>` 应用不同的样式
|
||
|
||
```css
|
||
ul li {
|
||
color: blue;
|
||
}
|
||
ul li:first-child {
|
||
color: red;
|
||
font-weight: bold;
|
||
}
|
||
```
|
||
|
||
#### `:active`
|
||
|
||
`:active` 表示的是鼠标从按下到松开的时间，下述代码表示 `<a>` 在不同状态下的样式。
|
||
|
||
```css
|
||
a:link { color: blue; } /* 未访问链接 */
|
||
a:visited { color: purple; } /* 已访问链接 */
|
||
a:hover { background: yellow; } /* 用户鼠标悬停 */
|
||
a:active { color: red; } /* 激活链接 */
|
||
```
|
||
|
||
> **注意**: `:active` 赋予的样式可能会被后声明的其他链接相关的伪类覆盖。为保证样式生效，需要把 `:active` 的样式放在所有链接相关的样式之后。
|
||
|
||
这种链接伪类先后顺序被称为 *LVHA 顺序*：`:link` > `:visited` > `:hover` > `:active`。
|
||
|
||
### 单独使用的伪类关键字
|
||
|
||
我们常见的伪类关键字的特征是以单个冒号`:`开头，跟随在基础选择器后面。
|
||
|
||
**但是单独使用的伪类关键字也可以对页面产生效果，** 例如：
|
||
|
||
通过 `:focus` 伪类，可以让任何元素获得焦点后的颜色变为红色。
|
||
|
||
```css
|
||
:focus {
|
||
color: red;
|
||
}
|
||
```
|
||
|
||
更多伪类，见 [MDN - 标准伪类索引](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes#%E6%A0%87%E5%87%86%E4%BC%AA%E7%B1%BB%E7%B4%A2%E5%BC%95)
|
||
|
||
|
||
|
||
## 🔰 什么是伪元素？
|
||
|
||
伪元素是一个**附加至选择器末的关键词**，允许你对被选择元素的特定部分修改样式。
|
||
|
||
与伪类相同，一个选择器中只能使用一个伪元素。但是，**伪元素必须紧跟在语句中的基础选择器之后**。
|
||
|
||
例如，下述代码可以给页面中每个 `<a>` 标签前添加一个😃表情。
|
||
|
||
```css
|
||
a::before {
|
||
content: "😃";
|
||
}
|
||
```
|
||
|
||
相比于伪类，伪元素的使用方式更加固定，其基本语法：
|
||
|
||
```css
|
||
selector::pseudo-element {
|
||
property: value;
|
||
}
|
||
```
|
||
|
||
> **注意**: 在书写伪元素时，你会见到单冒号 `:` 的写法，但此为CSS2过时语法，仅用于支持IE8，大多情况请书写双冒号 `::` 来表示伪元素。
|
||
|
||
更多伪元素见 [MDN - 标准伪元素索引](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements#%E6%A0%87%E5%87%86%E4%BC%AA%E5%85%83%E7%B4%A0%E7%B4%A2%E5%BC%95)
|
||
|
||
|
||
|
||
## 📌 伪类与伪元素共同使用
|
||
|
||
下面一个案例中，同时用到了伪类和伪元素：
|
||
|
||
> 用CSS实现一个开关样式，hover时触发，滑块为正方形，具体大小可随意，如下图
|
||
|
||
|
||
|
||
|
||
> 尽量实现如下要求，可实现一部分：
|
||
> 1. 开关动作均有动画过度（滑块移位、背景色）
|
||
> 2. 只用一个dom元素实现
|
||
> 3. 开关的高度是固定的，但宽度不固定，即宽度为未知父元素的100%，宽度始终大于高度
|
||
|
||
### 题目解读
|
||
|
||
由于只能使用一个 `DOM` 元素，而要区分滑块和背景的不同状态，故使用伪元素 `::before` 在 `.box` 内部添加一个滑块，滑块采用 `inline-block` 方式展示，并且由 `transition` 属性指定过渡动画。
|
||
|
||
对于背景也采用了 `transition` 来指定过渡动画，并且二者都通过 `:hover` 触发。
|
||
|
||
|
||
|
||
### 实现代码
|
||
|
||
`HTML`
|
||
|
||
```html
|
||
<div class="father">
|
||
<div class="box"></div>
|
||
</div>
|
||
```
|
||
|
||
`CSS`
|
||
|
||
```css
|
||
.box {
|
||
height: 50px;
|
||
width: 100%;
|
||
background-color: #c2d3e4;
|
||
transition: background-color 0.25s
|
||
}
|
||
|
||
.box::before {
|
||
content: "b";
|
||
color: white;
|
||
display: inline-block;
|
||
background-color: white;
|
||
position: relative;
|
||
top: 5px;
|
||
left: 5%;
|
||
height: 40px;
|
||
width: 35%;
|
||
transition: left 0.25s;
|
||
}
|
||
|
||
.box:hover {
|
||
background-color: #348fe4;
|
||
}
|
||
|
||
.box:hover::before {
|
||
left: 60%;
|
||
}
|
||
|
||
/* 父元素宽度任意 */
|
||
.father {
|
||
width: 100px;
|
||
}
|
||
```
|
||
|
||
### 相关链接
|
||
|
||
[代码片段](https://code.juejin.cn/pen/7088328950488760334)
|
||
|
||
[`CSS选择器`](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors) |