：not 选择器不会排除目标元素

Question

我正在使用:not选择器，并希望为HTML文件中的每个区域生成图像图标，除了导航部分的。每次我尝试下面的CSS，它仍然在导航部分和其他地方产生。pdf图像徽标。

body *:not(nav) [href*="pdf"]:after {
    content: url("pdf.png");
    padding-left: 10px;
}

<nav style="top: 400px; position: relative;">
    <ul class="nav-ul">
        <li class="nav-li-2 nav-mobile-li"><a class="nav-li-a" href="">Hello</a></li>
        <li class="nav-li-2 nav-mobile-li"><a class="nav-li-a" href="">Hello2</a></li>
        <li class="nav-li-2 nav-mobile-li"><a class="nav-li-a" href="pdf.png">Another PDF</a></li>
        <a href="pdf.png">PDF</a>
        <a href="intmark.png">INTMARK</a>
        <a href="browser.png">BROWSER</a>
    </ul>
</nav>
<p>
    <a href="pdf.png">PDF</a> This is just a paragraph in a page with fixed footer</p>
<p>This is just a paragraph in a page with fixed footer</p>

Answer 1

您正在尝试选择具有href属性的元素，这些属性是除nav以外的任何元素的后代。

选择器的问题是nav元素内的href属性也是 ul和li元素的后代，因此:not()不匹配。

从你的代码中去掉ul和li标签，你的选择器就能正常工作了。

这是一个可能的解决方案:

body > *:not(nav) > * {
  background-color: red;
}

<nav>
  <ul class="nav-ul">
    <li class="nav-li-2"><a class="nav-li-a" href="">Hello</a></li>
    <li class="nav-li-2"><a class="nav-li-a" href="">Hello2</a></li>
    <li class="nav-li-2"><a class="nav-li-a" href="pdf.png">Another PDF</a></li>
    <a href="pdf.png">PDF</a>
    <a href="intmark.png">INTMARK</a>
    <a href="browser.png">BROWSER</a>
  </ul>
</nav>
<p>
  <a href="pdf.png">PDF</a> This is just a paragraph in a page with fixed footer
</p>

或者，更具体地说:

body > *:not(nav) > [href*="pdf"]::after {
  content: "";
  background-color: red;
  display: inline-block;
  width: 10px;
  height: 10px;
}

<nav>
  <ul class="nav-ul">
    <li class="nav-li-2"><a class="nav-li-a" href="">Hello</a></li>
    <li class="nav-li-2"><a class="nav-li-a" href="">Hello2</a></li>
    <li class="nav-li-2"><a class="nav-li-a" href="pdf.png">Another PDF</a></li>
    <a href="pdf.png">PDF</a>
    <a href="intmark.png">INTMARK</a>
    <a href="browser.png">BROWSER</a>
  </ul>
</nav>
<p>
  <a href="pdf.png">PDF</a> This is just a paragraph in a page with fixed footer
</p>