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

t0wer

BlackHerald
Регистрация
24 Июн 2008
Сообщения
743
Реакции
436
Вроде бы вопрос простой, но меня на этом этапе поставил в тупик.
Итак, есть у нас произвольный 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>
В итоге в браузере мы видим результат один и тот же.
 

javx

Мой дом здесь!
Регистрация
28 Авг 2015
Сообщения
511
Реакции
255
Напиши внутри другого блока <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>
 

inturned

Webmaster & Designer
Регистрация
7 Ноя 2011
Сообщения
545
Реакции
272

HeadHunter

Shop Script
Регистрация
21 Июн 2011
Сообщения
625
Реакции
259
Вроде бы вопрос простой, но меня на этом этапе поставил в тупик.
Итак, есть у нас произвольный 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>
 

chirs

Создатель
Регистрация
14 Фев 2016
Сообщения
23
Реакции
17
Впринципе на вопрос уже ответили, хочу лишь посоветовать автору вопроса изучить тему css-селекторов - это будет очень полезно.
Для просмотра ссылки Войди или Зарегистрируйся
 

t0wer

BlackHerald
Регистрация
24 Июн 2008
Сообщения
743
Реакции
436
Впринципе на вопрос уже ответили, хочу лишь посоветовать автору вопроса изучить тему css-селекторов - это будет очень полезно.
Вот как раз и полез в изучение нюансов CSS чтобы разобраться. Вся моя проблема была в понимании вложенности селекторов. Мануалы говорят что и как должно выглядеть, но шаг вправо или влево показал, что нужно разбираться более глобально. Разжовывать селекотры и их применение в том или ином варианте приходится на своих ошибках.
Как видим из примера, наследование происходит в обоих случаях. Только в первом случае на все дочерние селекторы <li> любой вложенности, а во втором только на 1-ый. Данный мой код HTML не раскрыл видимую суть работы селекторов, что и породило вопрос. Благодарю всех участников данного топика за коструктивное участие.
 

uniqueart

Создатель
Регистрация
14 Апр 2012
Сообщения
11
Реакции
1
Отличается тем что запись 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>
 

Relimeyt

Создатель
Регистрация
3 Май 2012
Сообщения
21
Реакции
5
в первом случае будут затронуты все li во всех ol
во втором только прямые дочерние
 
Сверху