Помогите разобраться с Дочерними селекторами в CSS

t0wer

BlackHerald
Регистрация
24 Июн 2008
Сообщения
743
Реакции
440
Вроде бы вопрос простой, но меня на этом этапе поставил в тупик.
Итак, есть у нас произвольный HTML код:
HTML:
<ol>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</ol>
Определяем стиль для дочернего селектора li. Углубляемся в наследование в CSS.
И, вопрос...
Чем же все-таки отличается запись в таблице стилей?
HTML:
<style>
ol li {
...
}
</style>
от записи
HTML:
<style>
ol > li {
...
}
</style>
В итоге в браузере мы видим результат один и тот же.
 
Напиши внутри другого блока <li>...</li>.
Код:
<ol>
<li>point one</li>
<li>point two</li>
<li>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</li>
<div>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</div>
</ol>
 
Вроде бы вопрос простой, но меня на этом этапе поставил в тупик.
Итак, есть у нас произвольный HTML код:
HTML:
<ol>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</ol>
Определяем стиль для дочернего селектора li. Углубляемся в наследование в CSS.
И, вопрос...
Чем же все-таки отличается запись в таблице стилей?
HTML:
<style>
ol li {
...
}
</style>
от записи
HTML:
<style>
ol > li {
...
}
</style>
В итоге в браузере мы видим результат один и тот же.

ol li { будет распростратся на все li элементы внутри ol

допустим имеем структуру

HTML:
<ul>
    <li>Список один</li>
    <li>
        Начало второго списка
        <ul>
            <li>Список два</li>
        </ul>
    </li>
</ul>
  <style>
ul li{
  font-size:18px; /*присвоется все элементам*/
  color:red; /*присвоется все элементам*/
}

ul>li>ul>li{
  font-size:12px; /*присвоется дочернему*/
}
  </style>
 
Впринципе на вопрос уже ответили, хочу лишь посоветовать автору вопроса изучить тему css-селекторов - это будет очень полезно.
Для просмотра ссылки Войди или Зарегистрируйся
 
Впринципе на вопрос уже ответили, хочу лишь посоветовать автору вопроса изучить тему css-селекторов - это будет очень полезно.
Вот как раз и полез в изучение нюансов CSS чтобы разобраться. Вся моя проблема была в понимании вложенности селекторов. Мануалы говорят что и как должно выглядеть, но шаг вправо или влево показал, что нужно разбираться более глобально. Разжовывать селекотры и их применение в том или ином варианте приходится на своих ошибках.
Как видим из примера, наследование происходит в обоих случаях. Только в первом случае на все дочерние селекторы <li> любой вложенности, а во втором только на 1-ый. Данный мой код HTML не раскрыл видимую суть работы селекторов, что и породило вопрос. Благодарю всех участников данного топика за коструктивное участие.
 
Отличается тем что запись ol li будет для всех элементов списка, и вложенных списков в элемент списка, т.е. и для вложенных в них (ol li ol li) а запись ol > li будет работать только для первого уровня вложенности.

ol li в это случае стили будут применятся для всех li
HTML:
<ol>
 <li>
  <ol>
    <li><li>
  </ol>
 </li>
</ol>

ol > li в это случае стили будут только для первого уровня
HTML:
<ol>
 <li>
  <ol>
    <li><li>
  </ol>
 </li>
</ol>
 
в первом случае будут затронуты все li во всех ol
во втором только прямые дочерние
 
Назад
Сверху