: не селектор не будет исключать целевые элементы

Question

Я играю с: не селектором и хотел бы создать значок изображения для каждой отдельной области в моем файле 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>