likes
comments
collection
share

彻底搞懂 CSS 伪类和伪元素

作者站长头像
站长
· 阅读数 20

前端开发肯定都接触过伪类（pseudo class） 和伪元素（pseudo element） ，但是这两个概念特别容易搞混，不要怕，今天就带领大家攻克这个技术难点。

什么是伪类和伪元素？

  • 伪类：以冒号(:)开头，用于选择处于特定状态的元素。
  • 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。

这么说有点抽象，我们来看具体案例。例如下面的伪类语法表达的意思是：文档里的那些已经被用户访问过的 a 标签，当鼠标悬浮在它上面的时候，颜色为红色。

a:visited:hover {
  color: red;
}

效果如下：

彻底搞懂 CSS 伪类和伪元素

可以看到，无论是 visited还是 hover，都表示了 a 标签的某种状态，选择器始终选择的是伪类前面的元素，只不过当出现伪类描述的状态时，样式才生效而已。

注意，上面使用的是无痕浏览器打开的页面，是不可能出现 visited 状态的，因为无痕不记录访问历史，我们可以点击控制台的 :hov 图标手动勾选 :visited 和 :hover 来模拟 a 标签「已访问」和「悬浮」两种状态。

我们再来看一下伪元素的案例，下面的语法表达的意思是： div 标签里面首字的颜色为红色。

div::first-letter {
  color: red;
}

效果如下：

彻底搞懂 CSS 伪类和伪元素

与伪类不同的是，首字并不是 div 元素的某种状态，而是浏览器创建出来的一个虚拟的元素，我们可以在上图的右下角看到 Pseudo ::first-letter element提示，相当于浏览器自动选中了「彻」字。

注意：::first-letter 伪元素只作用于块状元素上面，如果把 div 换成 span，就无法选中首字了，除非手动设置 span 的 display 属性为 block 或 inline-block 等块状值。

从上面的案例当中，我们可以得出两个结论：

  • 伪类用于向某些已经存在的选择器添加特殊效果（当状态改变时）
  • 伪元素用于将特殊效果添加到不存在的虚拟元素中（浏览器自动创建）

也就是说伪类的本质还是类（class），作用于标签本身，只不过限定了状态条件；而伪元素的本质是元素（element），作用于该虚拟元素的内容本身。

伪类有哪些？

按照功能，可划分为以下几类：

  • 动态伪类：:visited、:focus、:hover等
  • 状态伪类：:disabled、:empty、:required 等
  • 结构伪类：:first-child、:nth-of-type等
  • 其他伪类：:target、:lang、:not()等

下面的表格详细记录了各种伪类及其描述：

伪类描述兼容性
:active元素处于活动状态时✅
:focus元素已获取焦点时✅
:hover元素处于悬浮状态时✅
:link链接未访问时✅
:visited链接已访问时✅
:first-child元素是首个子元素时✅
:last-child元素是最后一个子元素时✅
:nth-child()元素是第 n 个子元素时✅
:nth-last-child()元素是倒数第 n 个子元素时✅
:only-child元素是唯一子元素时✅
:first-of-type元素是首个特定类型的子元素时✅
:last-of-type元素是最后一个特定类型的子元素时✅
:nth-of-type()元素是第 n 个特定类型的子元素时✅
:nth-last-of-type()元素是倒数第 n 个特定类型的子元素时✅
:only-of-type元素是唯一的特定类型的子元素时✅
:not不满足指定条件时✅
:target元素 id 匹配到哈希值时✅
:root元素是文档树的根元素时✅
:lang()匹配到指定语言时✅
:empty元素处于没有子元素状态时✅
:invalid 和 :valid表单项是否有效✅
:required 和 :optional表单项是否必填✅
:in-range和 :out-of-range表单项是否超出范围✅
:read-only和 :read-write表单项是否只读✅
:enabled和 :disabled表单项是否禁用✅
:fullscreen当前处于全屏显示模式时⚠️
:blank输入框处于输入为空状态时❌
:dir()匹配到特定文字书写方向时❌

上表中的兼容性表示：

  • ✅ 代表主流浏览器都支持（至少 95% 以上）
  • ❌ 代表大部分主浏览器都不支持（仅 20% 以下浏览器实现该特性）
  • ⚠️ 代表部分浏览器支持（可能需要加前缀，例如 :webkit-或 :-moz-等）

伪元素有哪些？

与伪类相比，伪元素就少很多了，常用的如下：

伪元素选中或创建出来的元素兼容性
::first-letter选中块状元素中的首字母✅
::first-line选中首行✅
::before在之前创建一个不在文档树中的元素✅
::after在之后创建一个不在文档树中的元素✅
::placeholder选中表单元素的占位文本✅
::file-selector-button选中类型为 file 的 input 里面的 button✅
::selection选中被用户高亮的部分⚠️
::backdrop选中视觉聚焦元素后面的背景元素⚠️
::marker选中 list 的 marker⚠️

经典案例分析

添加前缀/后缀

伪元素最常用的技巧就是利用 ::before 和 ::after伪元素给某个元素添加前缀或后缀，例如简单的 DOM 结构：

<div className="error-message">系统异常，请稍后再试</div>

应用下面的 CSS 样式之后：

.error-message {
  position: relative;
  color: #666666;
  padding: 12px 30px;
  background-color: #FFECE4;
  border-radius: 5px;
}

.error-message::before {
  content: '';
  background-image: url('/public/icon-error.svg');
  background-size: 15px;
  position: absolute;
  left: 10px;
  display: inline-block;
  width: 15px;
  height: 15px;
}

可以得到如下效果：

彻底搞懂 CSS 伪类和伪元素

注意：创建 ::before和 ::after的元素时，必须要设置 content 属性，否则就不存在了。另外宿主元素的 position 别忘记设置成 relative 或 absolute 了，否则布局可能会乱掉。

虽然使用左右两个元素来布局也能实现上述效果，伪元素的优势是只需要创建一个元素即可。类似的场景还有在 input 输入框前面增加红色 require 星号。

消息气泡

我们在聊天时都会遇到带箭头的消息对话框，如下图所示：

彻底搞懂 CSS 伪类和伪元素

实现上面布局也很简单，也是用的 ::before和 ::after伪元素，HTML 结构：

<div className="container">
  <div className="box top-arrow">Top </div>
  <div className="box right-arrow">Right</div>
  <div className="box bottom-arrow">Bottom</div>
  <div className="box left-arrow">Left</div>
</div>

CSS 代码：

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
}

.box {
  width: 150px;
  height: 100px;
  background-color: red;
  color: white;
  position: relative;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.box::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
}

.box.bottom-arrow::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid red;
  left: 22px;
  top: -10px;
}

.box.right-arrow::after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid red;
  top: 22px;
  left: -10px;
}

.box.left-arrow::after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid red;
  top: 22px;
  right: -10px;
}

.box.top-arrow::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid red;
  left: 22px;
  bottom: -10px;
}

斑马条纹效果

在一个列表中，为奇数行和偶数行显示不同的颜色，效果如下：

彻底搞懂 CSS 伪类和伪元素

HTML 结构：

<div class="container">
  <div>第1行</div>
  <div>第2行</div>
  <div>第3行</div>
  <div>第4行</div>
  <div>第5行</div>
  <div>第6行</div>
</div>

CSS 样式：

.container {
  width: 200px;
  margin: 50px auto;
  border: 1px solid antiquewhite;
}

.container div {
  padding: 5px;
}

.container div:nth-child(even) {
  background-color: antiquewhite;
}

悬浮高亮效果

在电商网站购物时，当用户鼠标悬浮在当前商品上面的时候，通过放大尺寸、增加阴影来突出显示，：

彻底搞懂 CSS 伪类和伪元素

HTML 结构：

<div class="container">
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
</div>

CSS 样式：

body {
  margin: 0;
  background-color: rgb(245, 245, 245);
}

.container {
  height: 200px;
  width: 360px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.product {
  width: 100px;
  height: 100px;
  background: white;
  background-image: url(//cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png?thumb=1&w=400&h=400&f=webp&q=90);
  background-size: cover;
}

.product:hover {
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  transform: translate3d(0, -5px, 0) scale(1.2);
  cursor: pointer;
}

自定义复选框样式

默认的复选框比较单调，利用伪类和伪元素配合，可以自定义 checkbox 样式，效果如下：

彻底搞懂 CSS 伪类和伪元素

HTML 结构：

<div className="container">
  <div>
    <input type="checkbox" id="backend" />
    <label htmlFor="backend">后端开发</label>
  </div>

  <div>
    <input type="checkbox" id="backend" />
    <label htmlFor="backend">后端开发</label>
  </div>

  <div>
    <input type="checkbox" id="frontend" />
    <label htmlFor="checkbox">前端开发</label>
  </div>

  <div>
    <input type="checkbox" id="frontend" />
    <label htmlFor="checkbox">前端开发</label>
  </div>
</div>

CSS 样式：

input[type="checkbox"] {
  margin: 0;
}

#frontend {
  opacity: 0;
}

#frontend+label {
  margin-left: -12px;
  pointer-events: none;
}

#frontend+label::before {
  content: '\a0';
  display: inline-block;
  vertical-align: 0.1em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.2em;
  background-color: silver;
  text-indent: 0.15em;
  line-height: 0.65;
  cursor: pointer;
}

#frontend:checked+label::before {
  content: '\2713';
  background-color: yellowgreen;
}

自定义滚动条样式

浏览器自带的滚动条样式非常单一，不够美观，我们可以利用伪元素和伪类自定义一个滚动条，将其背景颜色改成淡灰，宽度为 6px，当鼠标悬浮上去之后宽度变为 10px。

彻底搞懂 CSS 伪类和伪元素

HTML 结构：

<div class="container">
  <div class="rect">
    <div class="box"></div>
  </div>
  <div class="rect2">
    <div class="box"></div>
  </div>
</div>

CSS 样式：

.container {
  display: flex;
  justify-content: space-around;
}

.rect,
.rect2 {
  width: 200px;
  height: 200px;
  overflow: scroll;
  border: 1px solid gainsboro;
}

.rect2::-webkit-scrollbar {
  width: 10px;
  height: 0;
  background-color: transparent;
}

.rect2::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.08);
  border-left: 4px solid transparent;
  background-clip: padding-box;
}

.rect2::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border: 0;
}

.box {
  width: 100px;
  height: 300px;
  background-color: aliceblue;
}
转载自:https://juejin.cn/post/7136087057542086693
评论
请登录