0

子选择器和后代选择器已泄漏到我的 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;
}

分组应该如何正确组合？

4

2 回答 2

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;
}
于 2010-03-29T13:24:26.380 回答
0

现在可以使用:whereand: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 所追求的，也是我所追求的。

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

于 2021-11-16T17:35:01.517 回答