使用 :is()、:where() 和 :has() 伪类编写更少的 CSS

CSS 多年来已经发展了很多。它引入了许多新的强大工具，使生活更轻松。今天我从这些工具中挑选了其中三个。我们将看到 :is()、:has() 和 :where() 伪类如何帮助简化代码、使其更具可读性并减少重复。

本文将向您介绍 :is()、:where() 和 :has() 伪类的含义、方式和原因。您将看到我们如何使用这些伪类通过编写更少且更优化的代码来设计我们的网站，这可能是软件开发中的绝佳实践。

当我们将探索伪类时，这里用一句话进行了基本概述。在 CSS 中，伪类是基于特定条件或状态应用于元素的规则。点击此链接了解有关伪类的更多信息。

我们要解决什么问题？

使用CSS（级联样式表）设计我们的网站时，我们都面临的一件事是代码重复。

例如：

.card .title, .card .body-content, .card .footer-action {
 ...
}

在此示例中，我有一个 .card 选择器，它的每个子选择器都会重复该选择器。但同时，您也会看到相同的样式应用于它们。

这就是组选择器在 CSS 中正常工作的方式，用逗号分隔每个选择器。这段代码工作正常，但我关心的是避免重复和组织不好。

我们在这里面临的另一个问题是 CSS 特异性问题。通过使用这样的代码和过多的重复，有时我们会忘记在何处以及在什么条件下使用什么样式。这就是这些伪类发挥重要作用的地方。

让我们一一看看每个伪类以了解它们的用途。

解释 :is() 伪类

:is() 伪类允许您选择共享通用样式的多个元素，而无需重复相同的代码。它通过将选择器组合成一个块来简化选择器，从而减少冗余。它将选择器列表作为参数，并将样式应用于与该列表中任何选择器匹配的所有元素。

.card :is(.title, .body-content, .footer-action) {
 ...
}

我已经使用了上面的示例，您将看到通过使用 :is() 伪类分组来减少 CSS 代码中的重复是多么容易。它使代码保持干净和高效。

上面的示例显示我们提供 .title、.body-content 和 .footer-action 作为 :is() 伪类的参数。在 :is() 父容器 .card 之前定义，以使其子容器的样式与其他代码分开。这就是 :is() 对与其列表匹配的所有参数应用相同样式的方式。

:is() 伪类广泛应用于所有主流浏览器，下图来自 caniuse.com，展示了不同版本浏览器的详细概述：

...

解释 :where() 伪类

:where() 伪类与 :is() 非常相似。我们可以将多个选择器分组以减少代码中的重复。它接受选择器作为参数。 :is() 和 :where() 伪类之间的主要区别在于，:where() 的特异性为零。这意味着当您想要设置元素样式而不给 CSS 选择器添加额外的权重时，它会很有帮助。

使用 :where() 伪类定义的样式可以轻松覆盖。这意味着 :where() 不会在其选择器中添加额外的特异性，并且 :where() 伪类内部的样式基于选择器自身的特异性。

使用 :where() 伪类的一个很好的用例是为多个元素定义基本样式，并且您不希望该样式影响以后可能会覆盖它的任何更具体的规则。

这样 :where() 就可以让你应用样式，而不会让你的 CSS 过于固执地决定哪些规则应该在冲突中获胜。

/* Applying a default style */
:where(h1, p, a) {
  color: red; 
  font-size: 20px;
}

/* More specific style */
a {
  color: blue;
  font-size: 16px;
}

在上面的示例中，h1、p 和 a 标签作为参数提供给 :where() 伪类以实现基本样式。之后，用作独立标签及其样式的标签可以轻松覆盖 :where().

中定义的样式

像 :is() 一样，几乎所有主流浏览器都支持 :where()。请参阅 caniuse.com 上的下图来检查支持的浏览器版本：

解释 :has() 伪类

:has() 是父选择器。这意味着它允许您根据其包含的子元素选择父元素。这是一件大事，因为 CSS 以前不允许这种行为。你也可以说 :has() 是 CSS 的 if 语句，因为它满足了条件需求。

假设您只想为包含 img 的 div 设置样式。这对于传统 CSS 来说是不可能的，但 :has() 使之成为可能。

<!-- Card with Image -->
<div class="card">
      <img src="https://placeholderjs.com/300x300" />
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
</div>

<!-- Card without Image -->
<div class="card">
      <h1>Card With Image</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, accusantium.</p>
      <a href="#">Call to Action</a>
    </div>

.card:has(a) {
  background-color: #e6e6e6;
}

.card:has(img) {
  background-color: #979759;
}

In this example, you see I have created two div elements with the same .card class, in CSS by using :has() pseudo-class. By using the same .card with :has() pseudo-class, two conditions are given with different styling that you can able to see in the image output.

:has() is also supported in almost all major browsers. See an image below from caniuse.com to check supported browser versions:

Conclusion

As new features are introduced in CSS, the more power it gains, and allows writing code more readable, efficient, and optimized code. You have learned :is(), :where() and :has() pseudo-classes in this article, and you see how useful they are. These pseudo-classes make our job much easier, they can be easily maintained, and the code is optimized.

This article is to show you how powerful these features are, and we’re one step closer of using these features in our project. I highly suggest you use features like these to increase your productivity.

This post is originally posted at programmingly.dev. Read full article by following this link: write less CSS by using :is(), :where(), :has() pseudo-classes

以上是使用 :is()、:where() 和 :has() 伪类编写更少的 CSS的详细内容。更多信息请关注PHP中文网其他相关文章！