将非选择器添加到样式会破坏样式

Posted 2023-03-06

【中文标题】将非选择器添加到样式会破坏样式

【英文标题】：Adding not selector to style breaks styling

【发布时间】：2017-05-26 12:53:17

【问题描述】：

我正在尝试将某种hover 样式应用于所有元素除了第一个。出于某种奇怪的原因 :first-child 有效，但添加 :not(first-child) 无效。为什么？完整的 JSFiddle here.

编辑： 显然，添加少量代码会破坏这种风格，我没有添加到原始小提琴中，因为我认为这无关紧要，现在我意识到它确实如此。请注意，当附加标签位于 a 标签之间时，该样式不起作用，如下所示：

<div id="mySidenav" class="sidenav">
  <div id="logoContainer">
    <a href="https://www.google.com/">
      <img src="assets/img/logo_white.png" >
    </a>
  </div>
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

工作 CSS：

.sidenav a:first-child:hover
    color: red;

CSS 完全不起作用：

.sidenav a:not:(first-child):hover
    color: red;

【问题讨论】：

你的选择器有错别字，不是:not()

@TylerH：当天没有票数了吗？

@BoltClock 在我阅读有关修复错字不起作用的 cmets 之前使用了不同的 cv 原因。

@TylerH：很公平。在这里，请帮助。

@undroid 好的，这就是混乱所在。这实际上不是您的第一个 a 元素。一分钟。

【参考方案1】：

这利用:not 伪选择器和直接后代选择器的组合仅将样式应用于立即 或直接 的<a> 元素， .sidenav 的后代。

由于您的第一个<a> 元素是.sidenav 的孙子，而不是直子，因此由于>，它没有得到color: red 样式，并且由于您关闭了“x”有一个 closebtn 类，我们也可以使用 :not(.closebtn) 来消除该类的红色样式：

.sidenav > a:not(.closebtn):hover
    color: red;

<div id="mySidenav" class="sidenav">
    <div id="logoContainer">
        <a href="https://www.google.com/">
            <img src="assets/img/logo_white.png" >
        </a>
    </div>
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

【讨论】：

我更新了我的小提琴，但它仍然无法正常工作：请看这里：jsfiddle.net/cnnwepvz

@undroid 更新了我的答案，不给“x”或悬停时的标志上色。

这 - .sidenav > a:not(.closebtn):hover 也应该可以工作，如果标记保持不变，那么它会更简单:)（不是说你的答案不正确）

@Harry 哦，我知道我在你的建议中错过了>。谢谢

@undroid 我认为这让您感到困惑，因为虽然您的 x 是页面上出现的第一个元素，但它不是 html 代码中的第一个元素，因此您实际上是针对徽标而不是<a class="closebtn">

【参考方案2】：

您的语法看起来有点错误。 试试：

.sidenav a:not(:first-child):hover
    color: red;

Updated JSFiddle

【讨论】：

刚刚错过了。以为我会是第一个来这里

很接近 :)

【参考方案3】：

您可以使用直接子代> 和下一个兄弟+ 选择器的组合。

.sidenav > a + a:hover 
  color: red;

<div id="mySidenav" class="sidenav">
  <div id="logoContainer">
    <a href="https://www.google.com/">
      <img src="assets/img/logo_white.png" >
    </a>
  </div>
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

【参考方案4】：

你可以试试

.sidenav a:not(:first-child):hover
    color: red;