Question

我正在使用：not selector，并希望为我的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之外的任何元素的后代。

选择器的问题在于href元素中的nav属性是后代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>

：not selector不会排除目标元素

1 个答案: