作者:顆顆顆顆幸福_483 | 来源:互联网 | 2023-01-12 13:45
我想申请一个CSS规则应用于所有
或
属于任一个下一个兄弟姐妹
,
,
,或
。
这样的事情显然是行不通的:
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。
1> Terry..:
您可以这样嵌套选择器,&
用于在嵌套上下文中引用父选择器:
h1, h2, h3, h4 {
& + ol, & + ul {
// Styles go here
}
}
...这将以您想要的选择器格式生成所有标题(h1
到h4
)及其直接同级(ul
或ol
)的组合 +
:
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()
伪类仍未在所有浏览器中得到广泛支持。