CSS属性选择器中的“或”逻辑：实现多条件匹配的策略

本教程探讨了CSS中如何实现属性选择器的“或”逻辑，以匹配具有多个可能属性值的元素。我们将介绍传统的逗号分隔选择器列表方法，以及现代且更简洁的:is()伪类，并对比它们的优缺点，提供代码示例，帮助开发者高效地构建复杂的CSS选择器。

CSS属性选择器的“与”逻辑

在css中，当您在一个选择器中连续使用多个属性选择器时，它们之间默认是“与”的关系。这意味着一个元素必须同时满足所有列出的属性条件才能被选中。例如，以下css规则将选中所有 href 属性以 “https” 开头并且以 “.org” 结尾的 <a> 标签：

/* 选中所有 href 属性以 "https" 开头且以 ".org" 结尾的链接 */
a[href^="https"][href$=".org"] {
color: green;
}

这种“与”逻辑非常直观且常用，但当我们需要匹配一个属性的多个可能值（即“或”逻辑）时，就需要采用不同的策略。

实现“或”逻辑的传统方法：选择器列表

要实现属性选择器之间的“或”逻辑，最直接且兼容性最好的方法是使用逗号 , 分隔的选择器列表。每个独立的子选择器代表一个“或”条件。例如，如果您想选中所有 href 属性中包含 “a”、”b” 或 “c” 之一的 <a> 标签，同时满足其他“与”条件，可以这样写：

/* 选中所有 href 属性以 "https" 开头、以 ".org" 结尾，且包含 "a"、"b" 或 "c" 的链接 */
a[href^="https"][href$=".org"][href*="a"],
a[href^="https"][href$=".org"][href*="b"],
a[href^="https"][href$=".org"][href*="c"] {
color: green;
}

对应的HTML结构示例：

<a href="https://a.org">https://a.org</a>  <!-- 匹配 -->
<a href="https://b.org">https://b.org</a>  <!-- 匹配 -->
<a href="https://c.org">https://c.org</a>  <!-- 匹配 -->
<a href="https://d.org">https://d.org</a>  <!-- 不匹配 -->
<a href="http://a.org">http://a.org</a>  <!-- 不匹配，因为不满足 https 开头 -->

这种方法虽然有效，但当条件增多时，选择器会变得非常冗长和重复，难以维护。

立即学习“前端免费学习笔记（深入）”；

现代且高效的方案：:is() 伪类

为了解决选择器列表冗长的问题，CSS引入了 :is() 伪类。:is() 伪类接受一个选择器列表作为参数，如果元素能够匹配列表中的任何一个选择器，那么该元素就会被选中。这使得表达“或”逻辑变得更加简洁和优雅。

使用 :is() 伪类重写上述示例：

/* 使用 :is() 伪类实现更简洁的“或”逻辑 */
a[href^="https"][href$=".org"]:is([href*="a"], [href*="b"], [href*="c"]) {
color: green;
}

对应的HTML结构示例：

<a href="https://a.org">https://a.org</a>  <!-- 匹配 -->
<a href="https://b.org">https://b.org</a>  <!-- 匹配 -->
<a href="https://c.org">https://c://c.org</a>  <!-- 匹配 -->
<a href="https://d.org">https://d.org</a>  <!-- 不匹配 -->
<a href="http://a.org">http://a.org</a>  <!-- 不匹配，因为不满足 https 开头 -->

:is() 伪类的主要优势包括：

• 简洁性：显著减少了选择器的重复代码，提高了可读性。
• 容错性：与普通的选择器列表不同，如果 :is() 内部的某个选择器无效，其他有效的选择器仍然会正常工作，不会导致整个规则失效。而普通的选择器列表只要有一个选择器无效，整个列表都会失效。
• 性能优化：在某些情况下，浏览器可以更有效地解析和匹配。

需要注意的是，:is() 是一个现代CSS特性，虽然目前主流浏览器支持良好，但在非常旧的环境中可能需要考虑兼容性。

注意事项与应用场景

1. *= 操作符的匹配范围*：
   `[attr=”value”]` 属性选择器表示匹配属性值中包含指定子字符串的元素。这意味着它会在属性值的任何位置**进行匹配，而不仅仅是特定部分。例如：

   a[href^="https"][href$=".org"]:is([href*="org"], [href*="http"], [href*="h"]) {
   color: green;
   }

   此规则会匹配 href 属性中包含 “org”、”http” 或 “h” 的链接，即使这些字符串是协议、域名或路径的任意一部分。

   <a href="https://org.org">https://org.org</a> <!-- 匹配，包含 "org" -->
   <a href="https://s.org">https://s.org</a> <!-- 匹配，包含 "s" (在https中) -->
   <a href="https://x.org">https://x.org</a> <!-- 不匹配 -->
   <a href="https://y.org">https://y.org</a> <!-- 不匹配 -->
   <a href="http://website.org">http://website.org</a> <!-- 不匹配，因为不满足 https 开头 -->

2. 没有内置的“内联或”操作符：
   CSS属性选择器语法不提供在单个属性选择器内部直接使用“或”操作符的功能，例如 [href*=”a”|”b”|”c”] 这样的写法是无效的。实现“或”逻辑必须通过选择器列表或 :is() 伪类来完成。

总结

在CSS中，属性选择器默认以“与”逻辑组合。当需要实现“或”逻辑，即匹配一个属性的多个可能值时，开发者有两种主要策略：

1. 逗号分隔的选择器列表：这是一种传统且兼容性极佳的方法，通过重复基本选择器并附加不同的属性条件来实现。适用于条件较少或需要最大兼容性的场景，但可能导致代码冗长。
2. :is() 伪类：这是一种现代且推荐的方法，它能够将多个“或”条件封装在一个简洁的结构中。它不仅提高了代码的可读性和维护性，还提供了容错性。适用于大多数现代Web开发项目。

选择哪种方法取决于项目的兼容性要求和对代码简洁性的偏好。在现代Web开发中，:is() 伪类无疑是构建复杂且优雅的CSS选择器的强大工具。