CSS/JQuery 选择器：有没有在类中选择类？

Posted 2023-03-06

【中文标题】CSS/JQuery 选择器：有没有在类中选择类？

【英文标题】：CSS/JQuery selectors: Is there anyway to select classes in classes?

【发布时间】：2013-04-04 05:51:15

【问题描述】：

假设我们有以下标记：

<div class="t-shirt black blue">Example</div>
<div class="t-shirt white blue">Example</div>
<div class="sweater black blue">Example</div>
<div class="sweater black red">Example</div>
<div class="sweater white red">Example</div>
<div class="hat black blue">Example</div>
<div class="hat black red">Example</div>
<div class="hat white red">Example</div>

有没有办法用一个选择器选择黑色和蓝色的t-shirt 或sweater？我的意思是，不使用逗号分隔的选择器。

例如，我不想做以下事情：

var wanted = $('.t-shirt.black.blue, .sweater.black.blue');

有没有做类似下面的事情？ （我知道它不起作用）：

var wanted = $('(.t-shirt, .sweater).black.blue');

提前致谢。

【问题讨论】：

不，你需要一个逗号来做或。

你确定？你有什么更好的选择吗？

为什么没有逗号分隔的选择器？

【参考方案1】：

不，没有。既不是 jQuery 也不是 CSS。

即使有用于分组选择器部分的功能性伪类（例如 Selectors 4 中即将推出的 :matches()），您仍然需要提供这些类的逗号分隔列表：

:matches(.t-shirt, .sweater).black.blue

不用说，上面的选择器在任何浏览器中都不起作用（目前）。你可以implement it yourself as a Sizzle extension如果你真的想，但老实说我不会打扰。

【讨论】：

有几天，在这里，在 Stack Overflow，当我看到你的答案并认为我应该给你所有我的赞成票。 ...自动地。 +1（不用说！）:)

@David Thomas：我是什么，[css] 的 Jon Skeet？ ;)

基本上：是的，实际上。 ;)

【参考方案2】：

你可以这样做：

var wanted = $('.black.blue').filter('.t-shirt, .sweater');

但是

var wanted = $('.t-shirt.black.blue, .sweater.black.blue');

无论如何可能更有效（虽然我没有测试过）

【讨论】：

我将使用.filter()。谢谢。 +1

【参考方案3】：

如果唯一的目标不是使用逗号，您可以这样做：

var blackblue = $(".black.blue"),
    tshirts = blackblue.filter(".t-shirt"),
    sweaters = blackblue.filter(".sweater"),
    both = tshirts.add(sweaters);

但是我看不出它有什么更好的地方，除非它能让你更好地组织起来。

【参考方案4】：

var selectionLevel1 = $(".t-shirt, .sweater").andSelf();
var finalSelection = $(".black", selectionLevel1);