likes
comments
collection
share

还在傻傻分不清常用伪类和伪元素？快来一文速览！

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

伪类

1. 定义

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

伪类由冒号（:）后跟着伪类名称组成（例如 :hover）。函数式伪类还包含一对括号来定义参数（例如 :nth-child()。附上了伪类的元素被定义为锚元素（例如 button:hover 中的 button）。

2. 常用伪类

前端常用的伪类有 :hover、:focus、:first-child、:first-of-type、:last-child、:last-of-type、:nth-child()、:not()、:has() 等等。

1. :hover

:hover 伪类在鼠标悬停在目标元素上触发。相关使用示例如下：

<div class="hover-class">hover状态</div>

.hover-class:hover {
    color: red;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

2. :focus

:focus 伪类在元素获得焦点时候触发，例如点击输入框聚焦时。示例如下：

<div style="padding: 50px">
  <div>正常状态</div>
  <input/>
  <div>focus状态</div>
  <input/>
</div>

input:focus {
  background-color: orange;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

3. :first-child

:first-child 伪类表示在同一层级下的元素中的第一个元素，且该元素拥有该类型。示例如下：

<div style="padding: 50px">
  <div>
    <p>此文本已选中！</p>
    <p>此文本未选中。</p>
  </div>

  <div>
    <h2>此文本未被选中：它不是一个 `p`。</h2>
    <p>此文本未被选中。</p>
  </div>
</div>

p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

4. :first-of-type

:first-of-type 伪类表示在同一层级下该类型的第一个元素，可能该元素并不在第一位。示例如下：

<div style="padding: 50px">
  <div>
    <p>此文本已选中！</p>
    <p>此文本未选中。</p>
  </div>

  <div>
    <h2>此文本未被选中：它不是一个 `p`。</h2>
    <p>此文本选中,它是当前层级的第一个 `p`。</p>
  </div>
</div>

p:first-of-type {
  color: lime;
  background-color: black;
  padding: 5px;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

5. :last-child

:last-child 伪类表示在同一层级下的元素中的最后一个元素，且该元素拥有该类型。示例如下：

<div style="padding: 50px">
  <div>
    <p>此文本已选中！</p>
    <p>此文本未选中。</p>
  </div>

  <div>
    <p>此文本未选中,它是当前层级的最后一个元素。</p>
    <h2>此文本未被选中：它不是一个 `p`。</h2>
  </div>
</div>


p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

6. :last-of-type

:last-of-type 伪类表示在同一层级下该类型的最后一个元素，可能该元素并不在最后。示例如下：

<div style="padding: 50px">
  <div>
    <p>此文本已选中！</p>
    <p>此文本未选中。</p>
  </div>

  <div>
    <p>此文本未选中,它是当前层级下的最后一个 `p`。</p>
    <h2>此文本未被选中：它不是一个 `p`。</h2>
  </div>
</div>

p:last-of-type {
  color: lime;
  background-color: black;
  padding: 5px;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

7. :nth-child()

:nth-child(an+n) 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：

  • 0n+3 或简单的 3 匹配第三个元素。
  • 1n+0 或简单的 n 匹配每个元素。
  • 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0 时，2n+0=0，第 0 个元素不存在，因为是从 1 开始排序)。你可以使用关键字 even 来替换此表达式。
  • 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
  • 3n+4 匹配位置为 4、7、10、13...的元素。

a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

常用示例如下：

  • tr:nth-child(2n+1) 表示表格的奇数行，可用 tr:nth-child(odd) 代替。
  • tr:nth-child(2n) 表示表格的偶数行，可用 tr:nth-child(even) 代替。
<div style="padding: 50px">
  <div class='text'>nth-child 测试</div>
  <div class='text'>nth-child 测试</div>
  <div class='text'>nth-child 测试</div>
  <div class='text'>nth-child 测试</div>
  <div class='text'>nth-child 测试</div>
  <div class='text'>nth-child 测试</div>
  <div class='text'>nth-child 测试</div>
</div>

.text:nth-child(2n) {
  color: orange;
}
.text:nth-child(2n+1) {
  color: red;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

8. :not()

:not() 伪类用来匹配不符合一组选择器的元素，，它可以将一个或多个以逗号分隔的选择器列表作为参数，但是选择器不得包含另外一个否定选择器或为元素，示例如下:

<div style="padding: 50px">
  <div class='text'>not 测试</div>
  <div class='text disabled'>not 测试</div>
  <div class='text disabled'>not 测试</div>
  <div class='text disabled'>not 测试</div>
  <div class='text disabled'>not 测试</div>
  <div class='text disabled'>not 测试</div>
  <div class='text'>not 测试</div>
</div>


.text {
  color: orange;
}
.text:not(.disabled) {
  color: red;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

9. :has()

:has() 伪类表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素。

一般的选择器只能选择一个元素子级或者之后的兄弟元素，但是通过 :has() 伪类可以获取到引用元素的父级或者先前的兄弟元素。示例如下：

<div style="padding: 50px">
  <div class="parent">
    <div class="normal">普通元素</div>
    <div class="normal">普通元素</div>
    <div class="normal disabled">禁用子元素</div>
  </div>
</div>
<div style="padding: 50px">
  <div class="parent">
    <div class="normal">普通元素</div>
    <div class="normal">普通元素</div>
    <div class="normal">普通元素</div>
  </div>
</div>

.parent {
  background: gray;
}
.parent:has(.disabled) {
  background: orange;
}
.normal {
  color: #fff;
}
.normal:has( + .disabled) {
  color: red;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

首先，我们为类名为 parent 的元素设置了灰色的背景，其子元素统一设置了白色字体。

现在有一个需求，当某一个子元素禁用时，它的上级元素的背景需要设置成 orange，且该元素的前一个元素的颜色要改成 red。

若是常规选择器是无法实现这样的需求的，但是我们可以通过 :has() 伪类来实现。

我们为父级元素 parent 添加 :has() 伪类，函数参数里面填写 .disabled，表示当子级元素满足 .disabled 类名时，此样式生效。同理，我们为 normal 类名的元素添加 :has() 伪类，函数参数内填写 + .disabled，表示若下一个兄弟元素的类名包含 .disabled，则此样式生效。

3. 伪元素

1. 定义

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式，例如 ::first-line 伪元素可以改变段落首行文字的样式。一个选择器只能使用一个相同类型的伪元素。

伪元素由冒号（::）后跟着伪元素名称组成，例如 ::before、::after 等。

2. 常用伪元素

常用伪元素有 ::before 和 ::after。

1. ::before

::before 伪元素会创建一个子元素，其将成为匹配选中的元素的第一个子元素，此元素默认为行内元素，其内容通过 content 属性来添加，示例如下:

<div style="padding: 50px">
  <div class="normal">普通元素</div>
</div>

.normal::before {
  content: 'before';
  color: orange;
  font-size: 12px;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

2. ::after

::after 伪元素会创建一个子元素，其将成为匹配选中的元素的最后一个子元素，此元素默认为行内元素，其内容通过 content 属性来添加，示例如下:

<div style="padding: 50px">
  <div class="normal">普通元素</div>
</div>

.normal::after {
  content: 'after';
  color: orange;
  font-size: 12px;
}

还在傻傻分不清常用伪类和伪元素？快来一文速览！

::after 伪元素还会用来清除浮动。

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
转载自:https://juejin.cn/post/7281864797116301373
评论
请登录