CSS / SCSS：两组选择器的笛卡尔积

Question

我想申请一个CSS规则应用于所有<ol>或<ul>属于任一个下一个兄弟姐妹<h1>，<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) { ... }例如您不能使用。但是，这比其他选择要好得多。

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

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

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

请注意，在撰写本文时（2017年10月），:matches()伪类仍未在所有浏览器中得到广泛支持。