Question

在更高级的示例中，我尝试使用:not选择器。 <a>类中的header链接不应设置样式； header类之外的所有链接均应设置样式：

html ：

<body>

  <div class="header">
    <div class="navbar">
    <ul>
      <li><a>Home</a></li>
      <li><a>Work</a></li>
      <li><a>Other</a></li>
    </ul>
    </div>

  </div>

  <div class="container">

    <div class="some other class">
      <a>Some link</a>
    </div>

  </div>

</body>

css ：

div:not(.header) a  {
    font-size: 100%;
    color: black;

    text-decoration: none !important;
    border-bottom: 6px solid red;

}

div:not(.header) a:hover  {
    border-bottom: none;
    background-color: #80b3ff;
    color: white;

    text-decoration: none !important;
}

但是它不起作用：我尝试将选择器更改为div:not(.navbar)，但没有结果（这意味着所有链接都被突出显示，而不仅仅是Some link）。

如果我删除内部的<div class="navbar">可以正常工作，但是我需要在存在第二个div的情况下使用它。

codepen

从CSS属性中排除类：not（）在嵌套div上不起作用

0 个答案: