如何用CSS :is()伪类简化特定层级section的样式选择器？

需要给两种<section>元素设置样式：

• 直接嵌套在<body>内的<section>
• 直接嵌套在<body>直接子<div>内的<section>

要替代下面这种重复写body >的冗余代码：

body > section, body > div > section {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid blue;
}

你之前尝试的body > :is(section, div > section)写法有误，因为:is()里的div > section无法作为<body>的直接子元素，相当于在匹配不存在的元素结构。

正确的写法是把父容器的两种可能情况放进:is()伪类中，再统一匹配子元素<section>：

:is(body, body > div) > section {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid blue;
}

说明 #

• :is(body, body > div) 匹配两种父元素：要么是<body>本身，要么是<body>的直接子<div>
• 后续的> section表示匹配上述父元素的直接子<section>，刚好覆盖需要样式的两种场景，同时会自动排除深层嵌套的<section>（比如<body> > div > div > section不会被选中）

用你提供的HTML代码测试，前两个<section>会正常显示浅蓝色背景，第三个深层嵌套的<section>不会被样式化，和目标效果完全一致。

内容的提问来源于stack exchange，提问作者NineChu