Неупорядоченный список CSS: почему один метод работает, а другой не работает?

Question

У меня есть основной неупорядоченный список в HTML / CSS следующим образом ...

<div class="floatleft">
    <ul class="help">
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Я пытаюсь сделать что-то нестандартное (маркеры изображений, поля, отступы и т. Д.). Поскольку я назначил класс блоку списка, я подумал, что могу сделать свои объявления CSS, как первые две строки ниже. Но это не работает. Когда я делаю это, как в двух строках ниже, это работает нормально. Я не понимаю, в чем разница.

.help ul { declarations }   /* Doesn't work */

.help li { declarations }   /* Doesn't work */


ul.help { declarations }    /* Works! */

li.help { declarations }    /* Works! */

Может ли кто-нибудь просветить меня? Спасибо.

Answer 1

«Не работает» требует, чтобы <ul> был потомком (прямым или не прямым) любого элемента класса help

Так что если div был:

<div class="floatleft help">

Это будет работать.

Answer 2

.help ul нацелен на <ul> потомков элементов с классом 'help':

Пример: ( не будет работать )

<div class="help">
   <ul>

ul.help цели <ul> элементов с помощью класса справки.

Пример: ( будет работать )

<ul class="help">

.help li должен работать, так как он нацелен на <li> потомков элементов с помощью класса help, который у вас есть.

Пример: ( будет работать )

<ul class="help>
  <li>

li.help не должен работать, потому что это нацелит на <li> элементы с помощью класса 'help', которого у вас нет в разметке.

Пример: ( не будет работать )

<ul>
  <li class="help">

Узнайте, как работают потомки и каскад («C» в CSS).

Answer 3

В последней строке li.help также не должен работать, потому что вы обращаетесь ко всем li с классом 'help', которого у вас нет.

То, что «работает», может также зависеть от того, к какому элементу вы пытаетесь применить стили. Возможно, вы захотите проверить некоторые справочные руководства по HTML относительно того, к каким элементам применять настройки вашего списка. Как правило, ваши общие настройки пули выполняются на ul, но некоторые пробелы также применяются к li в некоторых браузерах.

Answer 4

Чтобы расширить ответ Мэтта:

.help ul Означает "элемент ul, содержащийся (хотя и глубоко вложенный) внутри элемента с классом 'help'"

ul.help Означает "элемент ul с классом 'help'"

Для справки

ul .help Означает "элемент с классом 'help', содержащийся (хотя и глубоко вложенный) в элементе с элементом ul"

Answer 5

Символ пробела в значительной степени означает «теперь давайте посмотрим на детей».

Итак, когда у вас есть .help ul, вы говорите: «Хватайте все с помощью класса помощи», а затем «хватайте всех детей в этих вещах».

Тем не менее, «ul.help» говорит: «Хватай все, что ОБА имеет класс помощи и является уль».

Answer 6

Проблема заключается в том, что селектор .help ul применяется к тегу ul, который является дочерним элементом элемента с классом help. Соответствующая разметка для этого будет выглядеть примерно так: тег div может быть любым элементом, а не обязательно непосредственным родителем тега ul.

<div class="help">
    <ul>
        ....  
    </ul>
</div>

В вашем случае у вас есть тег ul с классом help, который именно то, что ul.help выбирает.

Подробную информацию о селекторах CSS см. На странице W3C .