Селекторы CSS: Навигация по DOM

Question

Я написал веб-страницу, используя class и id имена почти для всех элементов и понял, что это, вероятно, не самый лаконичный способ выполнить мой стиль. Я пытаюсь перейти к более стильному стилю «DOM Traversing», но, похоже, проблемы с одним стилем переписывают другого. Например мой Navbar выглядит следующим образом:

<nav> 
    <li class="navbar--link"><a href="#">Link 1</a></li> 
    <ul class="dropdown-custom" id="1"> 
    <li><a style="color: black" href="#">Client 1</a></li> 
    <li><a style="color: black" href="#">Client 2</a></li> 
    <li><a style="color: black" href="#">Client 3</a></li> 
    <li><a style="color: black" href="#">Client 4</a></li> 
    </ul> 

    <li class="navbar--link"><a href="#">Link 2</a></li> 
    <ul class="dropdown-custom" id="2"> 
    <li><a style="color: black" href="#">Peabody, MA</a></li> 
    <li><a style="color: black" href="#">Newton, MA</a></li> 
    <li><a style="color: black" href="#">Dallas, TX</a></li> 
    <li><a style="color: black" href="#">Houston, TX</a></li> 
    </ul> 

    <li>LOGO</li> 

    <li class="navbar--link"><a href="#">Link 3</a></li> 
    <ul class="dropdown-custom" id="3"> 
    <li><a style="color: black" href="#">1</a></li> 
    <li><a style="color: black" href="#">2</a></li> 
    <li><a style="color: black" href="#">3</a></li> 
    <li><a style="color: black" href="#">4</a></li> 
    </ul> 

    <li class="navbar--link"><a href="#">Link 4</a></li> 
    <ul class="dropdown-custom" id="4"> 
    <li><a style="color: black" href="#">A</a></li> 
    <li><a style="color: black" href="#">B</a></li> 
    <li><a style="color: black" href="#">C</a></li> 
    </ul> 
</nav> 

... и у меня были проблемы с моделированием a внутри ul без также осуществления на a вне ul. Я попытался использовать множество перестановок nav > ul > li > a, а также селектор +, но не повезло. Это что-то я делаю неправильно или есть какой-то другой способ выбрать ТОЛЬКО li в пределах ul?

Answer 1

Решение именно то, что вы указали в своем вопросе, Попробуйте использовать «прямой ребенок» >, Попробуйте перезапустить браузер и загрузите страницу, чтобы увидеть, если изменения происходят. Также проблема может заключаться в том, что некоторые элементы были стилизованы, например, li li имеет встроенный стиль, который имеет наивысший приоритет по сравнению с внешней таблицей стилей.

nav > ul > li > a 
 
{ 
 
text-decoration:none; 
 
} 
 
nav > li > a 
 
{ 
 
    color:green; 
 
    }

<nav> 
 
    <li class="navbar--link"><a href="#">Link 1</a></li> 
 
    <ul class="dropdown-custom" id="1"> 
 
    <li><a style="color: black" href="#">Client 1</a></li> 
 
    <li><a style="color: black" href="#">Client 2</a></li> 
 
    <li><a style="color: black" href="#">Client 3</a></li> 
 
    <li><a style="color: black" href="#">Client 4</a></li> 
 
    </ul> 
 

 
    <li class="navbar--link"><a href="#">Link 2</a></li> 
 
    <ul class="dropdown-custom" id="2"> 
 
    <li><a style="color: black" href="#">Peabody, MA</a></li> 
 
    <li><a style="color: black" href="#">Newton, MA</a></li> 
 
    <li><a style="color: black" href="#">Dallas, TX</a></li> 
 
    <li><a style="color: black" href="#">Houston, TX</a></li> 
 
    </ul> 
 

 
    <li>LOGO</li> 
 

 
    <li class="navbar--link"><a href="#">Link 3</a></li> 
 
    <ul class="dropdown-custom" id="3"> 
 
    <li><a style="color: black" href="#">1</a></li> 
 
    <li><a style="color: black" href="#">2</a></li> 
 
    <li><a style="color: black" href="#">3</a></li> 
 
    <li><a style="color: black" href="#">4</a></li> 
 
    </ul> 
 

 
    <li class="navbar--link"><a href="#">Link 4</a></li> 
 
    <ul class="dropdown-custom" id="4"> 
 
    <li><a style="color: black" href="#">A</a></li> 
 
    <li><a style="color: black" href="#">B</a></li> 
 
    <li><a style="color: black" href="#">C</a></li> 
 
    </ul> 
 
</nav>

Answer 2

.dropdown-custom > li { 
    //style li here 
} 

Это стиль всех элементов Li внутри DIV с классом .dropdown-custom, с тем же стилем, а не стилизации любых элементов Li вне .dropdown-custom дел.