CSS/SCSS : cartesian product of two sets of selectors

Question

我想将 CSS 规则应用于所有 <ol>或 <ul>是 <h1> 的下一个 sibling , <h2> , <h3> , 或 <h4> .

这样的事情显然行不通:

h1,h2,h3,h4 + ol,ul {
}

CSS 中似乎不允许使用括号来改变求值顺序。

所以，我必须写这样的东西:

h1 + ol, h1 + ul, h2 + ol, h2 + ul, h3 + ol, h3 + ul, h4 + ol, h4 + ul {
}

这行得通，但是很长。有没有什么技巧可以用更短、更具可扩展性的符号来实现同样的目的？我正在使用 SCSS，因此它可以是纯 CSS 或 SCSS。

Answer 1

您可以使用 & 嵌套选择器在嵌套上下文中引用父选择器:

h1, h2, h3, h4 {
    & + ol, & + ul {
        // Styles go here
    }
}

...这将以您想要的选择器格式生成所有标题(h1 到 h4)及其直接兄弟(ul 或 ol)的组合，<heading> + <list-parent> :

h1 + ol, h1 + ul, h2 + ol, h2 + ul, h3 + ol, h3 + ul, h4 + ol, h4 + ul {
    // Styles go here
}

这仍然有点冗长，因为您必须手动用逗号分隔每个子组合，即您不能使用 & + (ol, ul) { ... }例如。但是，这比其他替代方案要好得多。

2022 年更新:使用 :is()

:matches()的建议以下是日期:商定的伪类现在是 :is() :

:is(h1, h2, h3, h4) + :is(ol, ul) {
    // Styles go here
}

2017 年更新:使用 :matches()在 CSS 4 工作草案中

@IlyaStreltsyn 在下面的评论中指出 :matches() ^{[1] , [2]} (以前称为 :any ，可通过供应商前缀获得，例如 :-webkit-any() )功能伪类，CSS4 规范的一部分，可以看作是一种更简单的可能替代解决方案:

:matches(h1, h2, h3, h4) + :matches(ol, ul) {
    // Styles go here
}

请注意 :matches()伪类 is still not widely supported across browsers在撰写本文时(2017 年 10 月)。