CSS селекторы Путаница

Question

Я пытаюсь понять селекторы, если я что-то вроде

#topbar .ink-navigation ul.black li a.logoPlaceholder 

это означает, что я могу выдать

<li class="logoPlaceholder"> 

или

<a href="" class="logoPlaceholder">Test</a></li> 

Answer 1

Есть много трюков селекторных CSS вы можете сделать, я начал изучать селектор CSS в этом CSS game

Но давайте мне ответить на это что селектор звонит ..

#topbar .ink-навигации ul.black литий a.logoPlaceholder

поэтому в основном это выбрать тег Elemen т, что имеет класс logoPlaceholder внутри Li, который также внутри в уль тег с классом .black который также внутри в элементе с классом .ink-навигации с родительским элементом, который имеет идентификатор topbar

Edit: Добавлен код, чтобы показать, что я имею в виду:

<nav id="topbar"> 
    <div class="ink-navigation"> 
     <ul class="black"> 
      <li> 
       //Selectors call this element. 
       <a class="logoPlaceholder"></a> 
      </li> 
     </ul> 
     <ul class="white"> 
      <li> 
       //Selectors won't call this because li tag was not inside a ul with a class of black. 
       <a class="logoPlaceholder"></a> 
      </li> 
     </ul> 
    </div> 
</nav> 

Answer 2

Второй является верный.

a.logoPlaceholder 

Означает, что <a> тег имеет класс logoPlaceholder, как это:

`<a class="logoPlaceholder" href="#">Link text</a>` 

На самом деле, это также говорит вам, что основной HTML подмости выглядит примерно так:

<tag id="topbar"> 
    <tag class="ink-navigation"> 
     <ul class="black"> 
      <li> 
       <a href="#" class="logoPlaceholder"> 

Элементы, помеченные как tag, не указаны, так что невозможно, если они являются DIV или NAV или ASIDE или SECTION или? (Но, я думаю, первый один является СЧЕМ и вторым является ДИВЫМ)