Question

这是一个HTML片段：

<div class="wrapper">
    <div class="ebook">
         <div class="page"></div>
    </div>

    <div class="book">
         <div class="page"></div>
    </div>

    <div class="document">
         <div class="page"></div>
    </div>
</div>

我希望将所有div与page类匹配，而父级div只有ebook或book个类。可以使用此选择器：

div.ebook div.page, div.book div.page

然而，是否有一个CSS引擎支持以下语法？

(div.ebook, div.book) div.page

或更好

div.?book div.page

我对这样的解决方案不感兴趣：div:not(.document) > div.page。

Answer 1

建议的语法采用名为:matches()的函数伪类的形式：

/* As this is a pseudo-class, you can make it a little DRYer by saying
   div:matches(.ebook, .book) div.page instead */
:matches(div.ebook, div.book) div.page

如果您真的想获得技术，Firefox会将其实现为:-moz-any()：

:-moz-any(div.ebook, div.book) div.page

并且Chrome将其实现为:-webkit-any()：

:-webkit-any(div.ebook, div.book) div.page

（这些实际上首先出现在选择器被列为:matches()）

之前

但是如果您在CSS中使用它们，则必须复制规则集，因为certain CSS parsing rules，这与完全不使用它们一样好（事实上，更糟）。这些选择器仅供内部使用，不适用于生产。

您目前拥有的是目前唯一可行的选择。

如果你想作弊一点，你可以使用一个子串属性选择器，但是假设每个元素只有一个类，并且没有其他类名将与这个特定的子串相匹配（这类似于div.?book示例，但它带有属性选择器的限制，这些限制在类选择器中不存在）：

div[class$="book"] div.page

就个人而言，我只是坚持使用详细选项，因为它更强大。

Answer 2

看看这个小提琴应该做你想要的：

http://jsfiddle.net/Delorian/L44u0p8r/

div[class$="book"] { 
    background-color: yellow;
}

更多详情：https://stackoverflow.com/a/9836182/3264286

Answer 3

在CSS中没有OR选择器这样的东西，除了你给出的例子，其中逗号（,）可用于分隔多个选择器，例如;

div.ebook div.page,
div.book div.page{
    // CSS properties
}

如何编写这个'OR'CSS选择器？

3 个答案: