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

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用S 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中使用它们,你将不得不复制你的规则集,因为某些CSS解析规则,完全不使用它们(事实上,更糟).这些选择器仅供内部使用,不适用于生产.

您现在拥有的是目前唯一可行的选择.

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

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

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