Question

我想将CSS规则应用于<ol>，<ul>，<h1>或{的下一个兄弟姐妹的所有<h2>或<h3> {1}}。

这样的事情显然不起作用：

<h4>

在CSS中似乎不允许改变评估顺序的括号。

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

h1,h2,h3,h4 + ol,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) { ... }。但是，这比其他替代方案要好得多。

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

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

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

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

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