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

发布于 2024-08-26 23:03:37 字数 632 浏览 5 评论 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;
}

应该如何正确组合分组？

原文

Child and descendant selectors have been leaking to every element on my html structure and I found out that this happens when I combine grouping with it.

This affects all elements on the whole document:

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

while this only affects what it is suppose to affect leaving all elements outside of the specified selection criteria alone:

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;
}

How should grouping be combined properly?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

征棹 2024-09-02 23:03:38

你们非常亲密。 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;
}

You were very close. CSS grouping requires repeating the complete selector (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;
}

回复收藏 0 原文

恰似旧人归 2024-09-02 23:03:38

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

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

This can now be achieved using the :where and :is pseudo selectors:

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>

I'd previously tested this using the below:

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>

According to Mozilla whilst :is has more specificity, it can't use pseudo selectors internally. However, whilst I couldn't find either on w3schoools, you can see that what I have tested worked with :is and :where. I realise that @nest / & nesting is on the horizon, which will be another answer to this, but this is probably what the OP was after, and what I was, too.

For The Record - I realise this is an old question, but it was one of my first finds. If I'm off, of course, edits / comments are welcome for corrections ... but it'd be nice for everyone to know why, so that it can be seen as a definitively wrong answer.

回复收藏 0 原文

~没有更多了~