伪类和伪元素是什么什么是伪类

#什么是伪类 (pseudo-classes)？

伪类可以让我们根据元素的状态变化使用 CSS。例如，当我们想要设置某元素在被指标指到时的样式，我们可以使用 :hover 伪类来改变样式。

#介绍 4 个常见的伪类 (pseudo-classes) 用法

#:hover

当用户的鼠标或触控板等设备放在元素上时，我们可以使用 :hover 更改元素的样式。

#:link、 :visited

这两个伪类都是用在含有 href 属性的 <a> 元素上。 :link 可以调整使用者还未浏览过的链接样式，而 :visited 则可以改变使用者已浏览过的链接样式。

复制<a href="https://google.com">google.com</a>
<a href="https://juejin.cn">juejin.cn</a>

复制a:link {
  color: blue;
}

a:visited {
  color: red;
}

#:disabled 、 :enabled

按钮元素可以设置为“禁用”状态，而 :disabled  和  :enabled 可以调整按钮在“禁用”或“非禁用”状态时的样式。

#:first-child 、 :last-child

如果要在 HTML 中查找第一个或最后一个项目，可以使用 :first-child 和 :last-child。这些伪类会返回一组兄弟元素中的第一个或最后一个元素。

复制<div>
  <p>p 第一段文字</p>
  <p>p 第二段文字</p>
  <div>...</div>
</div>
<div>------分隔线------</div>
<div>
  <p>p 第一段文字</p>
  <div>...</div>
  <div>...</div>
  <p>p 第二段文字</p>
</div>

复制p:first-child {
  background: lightskyblue;
  font-weight: bold;
}

p:last-child {
  background: lightyellow;
  font-weight: bold;
}

#什么是伪元素 (pseudo-elements)？

伪元素可以在不需新增 HTML 的情况下新增额外元素。它具有多种用途，我们将在下一段中介绍一些常见的用法。

#介绍 4 个常见的伪元素 (pseudo-elements) 用法

#::before  和   ::after

在元素上使用 ::before 和 ::after 伪元素，会在元素中产生一个子元素，但必须在伪元素中定义 content，这个 content 可以是任何字符串，甚至可以是空字符串。

同时，我们也可以对 content 进行样式上的调整，如下代码所示。

复制<span class="text">This is Front-end world</span>

复制.text {
  background-color: #171923;
  color: white;
}

.text::after {
  content: " ♥ Interview Guide";
  background-color: #ffba10;
}

#::marker

使用 ::marker 可以调整列表或摘要元素 (summary) 的项目符号和编号的样式。

复制<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Strawberry</li>
</ul>

复制ul ::marker {
  color: red;
  content: "😊";
}

#::placeholder

当我们在设计表单时，会对一些元素，例如输入框 (input)，加入提示文字，而 ::placeholder 可以用来设置这个提示文字的样式。

复制<input type="email" placeholder="[email protected]" id="email" />

复制input::placeholder {
  color: darkcyan;
}

#::first-letter

我们经常在博客文章的设计中，文章的第一段的第一个字母会有特殊的样式，以增加读者的注意力。这种样式可以轻松通过使用伪元素 ::first-letter 来实现。

复制<p>第一个字要蓝色</p>

复制p::first-letter {
  color: blue;
}