CSS选择器“(A或B)和C”?
Posted
技术标签:
【中文标题】CSS选择器“(A或B)和C”?【英文标题】:CSS Selector "(A or B) and C"? 【发布时间】:2011-11-22 23:08:16 【问题描述】:这应该很简单,但我无法找到它的搜索词。 假设我有这个:
<div class="a c">Foo</div>
<div class="b c">Bar</div>
在 CSS 中,如何创建一个选择器来匹配匹配“(.a 或 .b)和 .c”的内容?
我知道我可以这样做:
.a.c,.b.c
/* CSS stuff */
但是,假设我要经常做这种逻辑,有多种逻辑组合,有没有更好的语法?
【问题讨论】:
【参考方案1】:有更好的语法吗?
没有。 CSS 的 or
运算符 (,
) 不允许分组。它本质上是选择器中优先级最低的逻辑运算符,因此您必须使用.a.c,.b.c
。
【讨论】:
【参考方案2】:还没有,但是有一个实验性的:is()
(以前的:matches()
)伪类选择器可以做到这一点:
:is.a .b) .c
/* stuff goes here */
您可以在here 和here 找到更多信息。目前,大多数浏览器都支持其初始版本:any()
,其工作方式相同,但将被:is()
取代。在到处使用它之前,我们只需要再等一会儿(我肯定会的)。
【讨论】:
责怪 IE 没有实现他们根本没想到的东西,而且一开始就没有在任何草案中,这是不合理的。:-moz-any()
和 :-webkit-any()
早在 Mozilla 为 Selectors 4 推荐它之前就出现了(导致它目前的化身为 :matches()
)。
期望任何供应商从不稳定的草案中实现功能同样不合理,而不管草案已经提供了多长时间(这是因为 Selectors 4 仍然不稳定且很大程度上未实现) FPWD 后三年多)。
@BoltClock,他们整整十年都将 IE6 归咎于 2001 年不存在的事情。人们只是想责怪某人。
关于实验性的一个词是,除非正式实施,否则您不想开始依赖它们。虽然它看起来像是一个很好的解决方案 - 它可能会消除个人阻止我在我的项目中实施它的可能性。即使跟踪一个实验性的伪类也不能让我感到安全。很可能它将在项目中的多个地方使用,以防万一,如果您有多个使用它的地方 - 您需要以某种方式跟踪所有内容。你当然可以有后备,但仍然可以成功,但这听起来并不干净
不再是实验性的。 :is()
自 2021 年 2 月 (MDN) 以来已在所有主要浏览器中实现 - 尽管将其用于 Web 应用程序可能还为时过早(没有后备)。【参考方案3】:
对于阅读本文的人 >= 2021:
我发现使用 :is()
选择器成功了:
*:is(.a, .b).c...
【讨论】:
谢谢。我想知道9年前我问这个问题时“:is()”选择器是否存在? 我对此表示怀疑! @Josh --> 我留下了这个答案,因为这篇文章是我在谷歌上搜索如何在 CSS 选择器中组合类时排名第一的结果。对于目前正在观看的人来说,这是一个有用的答案——尽管之前的答案可能更多地显示了技术进化的产物。 @Joshis()
取代了 Metalcoder 2014 年的回答中的 :matches()
。有关更多信息,请参阅 developer.mozilla.org/en-US/docs/Web/CSS/:is。【参考方案4】:
如果你有这个:
<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>
而您只想选择具有.x
和(.a
或.b
)的元素,您可以这样写:
.x:not(.c) ...
但这只有在你有三个“子类”并且你想选择其中两个时才方便。
只选择一个子类(例如.a
):.a.x
选择两个子类(例如.a
和.b
):.x:not(.c)
选择所有三个子类:.x
【讨论】:
a or b or c or d
形式的任何逻辑子句都与not(not(a) and not(b) and not(c) and not(d))
相同,因此“或”实际上只是一个便利函数。理论上,在所有的情况下应该可以不用它。在 OP 的情况下 (.a or .b) and .c
-> :not(:not(.a):not(.b)).c
@MaxMurphy 你测试过这个吗?
今天早上五点,是的!我有 js 吐出一阶逻辑,选择器在叶子上,给出诸如:not(:not([data-status="ACT"]):not([data-status="ISS"]):not([data-status="COR"]))[data-month="08"]
之类的结果。该代码还不够干净,无法供公众阅读,否则我会发布它。我在 chrome、safari 和低端安卓手机上进行了测试。
@MaxMurphy 你的观点很好,但我认为你引用了一个相当折磨人的“便利功能”定义。数字计算机可以做的任何事情都可以分解为与非门,但我不会将软件工程的其余部分称为“一堆便利功能”。当结构可以组合时,程度的差异很快就会变成事实上的种类差异。
@MaxMurphy 我很难确定你只是在开玩笑。 :( 否定 CSS 伪类 :not(X) 是一个以 简单选择器 X 作为参数的函数式表示法。它匹配参数未表示的元素。 X 不得包含另一个否定选择器。(来自Mozilla docs,强调我的)【参考方案5】:
没有。标准 CSS 不提供您正在寻找的那种东西。
但是,您可能需要查看 LESS 和 SASS。
这两个项目旨在通过引入附加功能(包括变量、嵌套规则和其他增强功能)来扩展默认 CSS 语法。
它们允许您编写更加结构化的 CSS 代码,并且几乎可以肯定它们中的任何一个都可以解决您的特定用例。
当然,没有一个浏览器支持它们的扩展语法(特别是因为这两个项目都有不同的语法和特性),但它们所做的是提供一个“编译器”,它将你的 LESS 或 SASS 代码转换为标准 CSS,它然后您可以在您的站点上进行部署。
【讨论】:
那个时候我还不如直接用php打印"Content-type: text/css"以上是关于CSS选择器“(A或B)和C”?的主要内容,如果未能解决你的问题,请参考以下文章