分组应该如何与子选择器和后代选择器正确组合？答案

【问题标题】：How should grouping be combined properly with child and descendant selectors?分组应该如何与子选择器和后代选择器正确组合？
【发布时间】：2011-02-02 01:07:10
【问题描述】：

子选择器和后代选择器已泄漏到我的 html 结构中的每个元素，我发现当我将分组与它结合时会发生这种情况。

这会影响整个文档中的所有元素：

ul#topnav > li a, a:hover, a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

虽然这只会影响它假定的影响，让所有元素单独超出指定的选择标准：

ul#topnav > li > a{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > li > a:hover{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > li > a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

分组应该如何正确组合？

【问题讨论】：

标签： css css-selectors grouping descendant

【解决方案1】：

你们很亲密。 CSS 分组需要重复完整的选择器 (ul#topnav > li)：

ul#topnav > li > a, 
ul#topnav > li > a:hover,
ul#topnav > li > a:focus{
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

【讨论】：

【解决方案2】：

现在可以使用:where 和:is 伪选择器来实现：

ul#topnav > li :is(a, a:hover, a:focus){
 font-size: 14px;
 color: #C2C5CC;
 text-decoration: none;
 padding:0px;
}

ul#topnav > :is(li#barp, li#boop:hover) :is(a:hover, a:focus){
  background-color: black;
  font-size: 14px;
  color: white;
  text-decoration: none;
  padding:0px;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<ul id="topnav">
  <li id="boop">One <a href="#">1</a></li>
  <li id="boop">Two <a id="boop" href="#">2</a></li>
  <li id="barp">Three <a href="#">3</a></li>
  <li id="boop">Four <a href="#">4</a></li>
  <li id="blip">Five <a href="#">5</a></li>
</ul>

</body>
</html>

我之前使用以下方法对此进行了测试：

div> :is(#div2:hover, #div3)>span {
  background-color: pink;
  color: black;
}

div> :where(#div1:hover, #div3) {
  background-color: purple;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <style></style>
</head>

<body>

  <div id="divA">
    <div id="div1">Some 1...</div>
    <div id="div2">Some <span>2</span>...</div>
    <div id="div3"><span>Some</span> 3...</div>
  </div>

</body>

</html>

根据 Mozilla 的说法，虽然 :is 具有更多特异性，但它不能在内部使用伪选择器。但是，虽然我在 w3schoools 上都找不到，但您可以看到我测试过的内容适用于 :is 和 :where。我意识到 @nest / & 嵌套即将到来，这将是另一个答案，但这可能是 OP 所追求的，也是我所追求的。

为了记录 - 我意识到这是一个老问题，但这是我的第一个发现。如果我离开了，当然，欢迎编辑/cmets 进行更正......但每个人都知道为什么会很好，这样它就可以被视为一个明确的错误答案。

【讨论】：