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

[t0wer]

Вроде бы вопрос простой, но меня на этом этапе поставил в тупик.
Итак, есть у нас произвольный HTML код:

<ol>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</ol>

Определяем стиль для дочернего селектора li. Углубляемся в наследование в CSS.
И, вопрос...
Чем же все-таки отличается запись в таблице стилей?

<style>
ol li {
...
}
</style>

от записи

<style>
ol > li {
...
}
</style>

В итоге в браузере мы видим результат один и тот же.

 

[javx]

Напиши внутри другого блока <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]

В итоге в браузере мы видим результат один и тот же.

В вашем случае это одно и тоже, а если интересно почитать про "Дочерние селекторы", то сюда: Для просмотра ссылки Войди или Зарегистрируйся

 

[HeadHunter]

Вроде бы вопрос простой, но меня на этом этапе поставил в тупик.
Итак, есть у нас произвольный HTML код:

<ol>
<li>point one</li>
<li>point two</li>
<li>point three</li>
</ol>

Определяем стиль для дочернего селектора li. Углубляемся в наследование в CSS.
И, вопрос...
Чем же все-таки отличается запись в таблице стилей?

<style>
ol li {
...
}
</style>

от записи

<style>
ol > li {
...
}
</style>

В итоге в браузере мы видим результат один и тот же.

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

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

<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]

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

 

[t0wer]

Впринципе на вопрос уже ответили, хочу лишь посоветовать автору вопроса изучить тему css-селекторов - это будет очень полезно.

Вот как раз и полез в изучение нюансов CSS чтобы разобраться. Вся моя проблема была в понимании вложенности селекторов. Мануалы говорят что и как должно выглядеть, но шаг вправо или влево показал, что нужно разбираться более глобально. Разжовывать селекотры и их применение в том или ином варианте приходится на своих ошибках.
Как видим из примера, наследование происходит в обоих случаях. Только в первом случае на все дочерние селекторы <li> любой вложенности, а во втором только на 1-ый. Данный мой код HTML не раскрыл видимую суть работы селекторов, что и породило вопрос. Благодарю всех участников данного топика за коструктивное участие.

 

[uniqueart]

Отличается тем что запись ol li будет для всех элементов списка, и вложенных списков в элемент списка, т.е. и для вложенных в них (ol li ol li) а запись ol > li будет работать только для первого уровня вложенности.

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

<ol>
 <li>
  <ol>
    <li><li>
  </ol>
 </li>
</ol>

ol > li в это случае стили будут только для первого уровня

<ol>
 <li>
  <ol>
    <li><li>
  </ol>
 </li>
</ol>

 

[Relimeyt]

в первом случае будут затронуты все li во всех ol
во втором только прямые дочерние