Селекторы нескольких селекторов CSS

Question

Я хочу написать список горизонтальных тегов в качестве навигатора. Я прочитал некоторые CSS файлы в Интернете, и найти следующий (desendant?) Стиль селектора в одном CSS файле:

1. нав уль Ли в {...}
2. нав а {...}
3. nav ul li {...}

Я знаю, что для 2, nav означает, что все элементы «a» находятся под классом nav. Но как насчет 1. и 3.? Делает ли 3. означает все «li» insinde «ul», а «ul» также должен находиться внутри «nav»? Мне кажется, что 1 и 2. будут иметь схожий эффект. Но я не могу найти ответ в Интернете.

Answer 1

Первое означает, что она будет применяться ко всем элементам <a> внутри <li> который находится внутри <ul>, которая находится в пределах <nav>. Другими словами, это стиль код, который выглядит следующим образом:

<nav> 
    <ul> 
     <li> 
      <a>...</a> 
     </li> 
    </ul> 
</nav> 

Причина, по которой селектор 1 и селектор 2 будет применяться к тем же элементам, потому что, если вы заметили <nav><ul><li><a>...</a></li></ul></nav>, то <a> в оба раза внутри <nav><ul>...</ul></nav>. Первый селектор является более строгим, чем второй селектор, но поскольку все внутри <ul> всегда должно находиться внутри элемента <li>, селекторы должны всегда применять к тем же элементам.

Третий селектор будет применяться к <li> элементам внутри <ul>, который находится внутри <nav>, как и вы сказали. Другими словами:

<nav> 
    <ul> 
     <li>...</li> 
    </ul> 
</nav> 

Edit: Как @Hughes предложил, что-то отметить здесь понятие "специфичности". Когда существует несколько правил, применяемых к одному и тому же объекту, часто возникает необходимость разрыва связей. Например, что произойдет, если у нас есть этот код?

nav ul a { color: blue; } 
nav ul li a { color: green; } 

Это до CSS, чтобы определить, какой цвет шрифта для применения к <nav><ul><li><a> ... </a></li></ul></nav>. В этих случаях CSS выбирает правило, которое является более конкретным при описании того, к каким элементам он относится. В этом примере <a> будет окрашен в зеленый цвет, поскольку правило nav ul li a более специфично при описании элементов, к которым должно применяться правило (просто подумайте о английском определении слова «конкретный»). Таким образом, хотя оба селектора 1 и селектор 2 из вопроса должны применяться к тем же объектам, если они когда-либо оба предоставляют одно и то же свойство CSS, значение в селекторе 1 выбирается над значением в селекторе 2.