CSS: запутался в поведении селектора>

0

Я думал, что> selector только выбирает прямые дочерние элементы элемента (исключая унаследованные свойства), но следующий пример меня смутил:

<ul>
    <li>Item 1</li>

    <li>Item 2
        <ol>Subitem 2
            <li>Subitem 2A</li>
            <li>Subitem 2B</li>
        </ol>
    </li>

    <li>Item 3
        <li>Subitem 3a
            <li>Subitem 3aa
                <ol>Subitem 3aaa
                    <li>Subitem 3aaaa
                    </li>
                </ol>
            </li>
        </li>
    </li>

    <ol>Item 4</ol>
</ul>

ul>li {
    color: green;
    font-style:italic;
    font-size:20px;
    border:5px solid red;
}

Поэтому я пробую это, и это то, что я вижу в Chrome "Версия 30.0.1599.101 м": Изображение 174551

Я пытался разобраться, как применяются правила, но я не понимаю его полностью:

Пункт 1,2,3: Получите все стили, потому что они прямые дети из ul и являются li

Пункт 4: Не получает никаких стилей, потому что это не li

Subitem 2-2B: Получите унаследованные стили цвета и шрифта, но не получите стили границы. Это потому, что они не прямые дети или потому, что они не ли?

Подпункт 3a и 3aa: Получить все styles-, почему? Они не являются прямым ребенком из ul. Его похоже, что> selector удаляет все дочерние элементы одного типа, пока они не будут прерваны элементом другого type-, это правильно?

Subitem 3aaa и 3aaaa: Dont получить стиль границы, но все равно получите унаследованные стили цвета и шрифта. Это потому, что они дети ли, у которых есть эти стили? Почему это?

Просто пытаюсь обернуть мою голову этим поведением.

  • 2
    У вас проблемы, потому что ваш код неверен. Вы не можете иметь <li> внутри <li> не <ol> качестве непосредственного родителя <ul> или <ol> . Браузер предполагает, что вы хотели его вставить, и вставляет его для вас.
Теги:
css-selectors

5 ответов

3
Лучший ответ

Вы не можете вложить <li> в <li> без запуска другого <ul>. Браузер автоматически закрывает <li>.

Поделиться
  • 2
    <li> имеет необязательный закрывающий тег. Браузер не вставляет <ul> , он вставляет </li> .
  • 0
    Я обновил это. Спасибо!
1

a > означает любой элемент, который является прямым дочерним элементом предыдущего элемента (ов).

так....

ul li означает, что любой li, который находится внутри ul, должен быть выбран.

ul>li означает любое li, которое является прямым дочерним элементом, например <ul> <li>... & not like <ul> <li> <p> <li> this last li wont get the styles...

сначала это сбивало с толку, но стало ясно очень быстро.

но в вашем случае, так как вы не ставите ul или ol перед запуском другого li. браузер добавляет один. И это делает непрямым li дочерний элемент ul и, следовательно, он также выбирается.

Поделиться
1

<li> имеет необязательные теги закрытия, поэтому, если браузер видит еще один <li> до корреспондирующего </li>, он неявно вставляет закрытие для предыдущего тега. Вы можете проверить это, используя инспектор DOM в инструментах разработчика вашего браузера. Это означает, что пункт 3 "подпункты" на самом деле являются братьями и сестрами для пункта 3.

Изображение 174551

Поделиться
  • 0
    Спасибо за упоминание инспектора DOM. Глядя на это, я ясно вижу, как браузер закрывал эти теги <li>.
0

Жаль, что представленный html был плохо сформирован, потому что это только делает вещи более запутанными. Однако, даже если они хорошо сформированы, все вложенные lis будут по-прежнему иметь зеленый цвет, но у них не будет границ.

Зачем?

Из-за наследования - цвет, размер шрифта и стиль шрифта - все наследуемые свойства - граница - нет.

Это показывает ограничение прямого дочернего селектора - вы не можете использовать его со свойствами, которые наследуют.

Поделиться
  • 0
    Это не дает ответа на вопрос. Чтобы критиковать или запрашивать разъяснения у автора, оставьте комментарий под его постом - вы всегда можете комментировать свои собственные посты, и, когда у вас будет достаточно репутации, вы сможете комментировать любые посты .
  • 0
    В этом нет сомнений - это утверждение: «CSS: Смущает поведение> селектора». Путаница определенно связана с наследованием и с тем, как прямой дочерний селектор не может с этим справиться. Плохо отформатированный html - красная сельдь. Как только это будет исправлено, путаница наследования все еще будет там.
0

Это потому, что у вас есть открытый тег li. Скажем, если вы должны закрыть элемент 3 с помощью </li> сразу после пункта 3 вместо того, чтобы оставить его открытым. Тогда ол не станет зеленым. Но bc они открыты, ol является частью li.

<li>Item 3
        <li>Subitem 3a
            <li>Subitem 3aa
                <ol>Subitem 3aaa
                    <li>Subitem 3aaaa
                    </li>
                </ol>
            </li>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню