Верстка, CSS, HTML, SVG

Разница между ul > li и ul li, ul ul li и ul > ul > li на определенном примере

ссылка на код html и css: https://codepen.io/ppqtojcq-the-encoder/pen/GRweLrd
мне нужно увеличить элементы списка «мы предлагаем», являющиеся детьми тега ul, до размера 20px, при этом «внуков» (протезирование) уменьшить до 14px и сделать жирными.
Как я поняла, если применять ul > li применяется для выделения только 1 уровня вложенности, а ul li для всех уровней вложенности.
Однако, в случае с ul > ul > li все не так. Если я пишу в коде ul > ul > li, то почему-то ничего не меняется. По моей логике все примерно так: все теги li, вложенные в тег ul, который вложен в ul. Но ничего не меняется и текст все также 20px, а должен был быть 14px.
Когда я ставлю ul ul li, то смысл не меняется и все теги li, вложенные в тег ul, который вложен в ul, так почему результат разный?
Я примерно понимаю различие пробела от >, но на практике у меня не получается применять эту разность. Поясните, пожалуйста
АА
Артём Агафонов
444
Разница между ul > li и ul li, ul ul li и ul > ul > li заключается в том, что селектор ul > li выбирает только элементы li, которые являются непосредственными дочерними элементами элемента ul, в то время как селектор ul li выбирает все элементы li, которые являются дочерними элементами элемента ul, независимо от их уровня вложенности.

В вашем случае, вы хотите увеличить размер шрифта для элементов li, которые являются дочерними элементами элемента ul, до 20px, и уменьшить размер шрифта для элементов li, которые являются внуками элемента ul, до 14px и сделать их жирными. Вы можете использовать следующий CSS для достижения этого:
 ul > li { 

  font-size: 20px; 

} 

ul li { 

  font-size: 14px; 

  font-weight: bold; 

}
Этот CSS будет работать, потому что селектор ul > li выбирает только элементы li, которые являются непосредственными дочерними элементами элемента ul. Элементы li, которые являются внуками элемента ul, не будут выбраны селектором ul > li, и поэтому на них не будет применен CSS.

Однако, если вы используете селектор ul ul li, он будет выбирать все элементы li, которые являются дочерними элементами элемента ul, независимо от их уровня вложенности. В этом случае, CSS будет применен ко всем элементам li, включая те, которые являются внуками элемента ul.

Это означает, что все элементы li будут иметь размер шрифта 20px, даже те, которые должны быть 14px. Чтобы исправить это, вы можете использовать следующий CSS:
 ul > li { 

  font-size: 20px; 

} 

ul ul li { 

  font-size: 14px; 

  font-weight: bold; 

}
Этот CSS будет работать, потому что селектор ul > li выбирает только элементы li, которые являются непосредственными дочерними элементами элемента ul, а селектор ul ul li выбирает элементы li, которые являются внуками элемента ul. На элементы li, которые являются непосредственными дочерними элементами элемента ul, будет применен CSS из селектора ul > li, а на элементы li, которые являются внуками элемента ul, будет применен CSS из селектора ul ul li.
Ербол Асанов
Ербол Асанов
25 860
Лучший ответ
если ничего не понятно, попробуй начать учить хоть что-то, а не гадать по непонятному коду..
Андрей Верхоланцев
Андрей Верхоланцев
91 172
ничего не понятно... Почитай про селекторы
Пробел в селекторе применяется в потомкам, а > к непосредственным детям элемента, без уровней вложенности
Андрей Недосекин
Андрей Недосекин
6 773
Артём Агафонов читала, я понимаю все в теории, но на практике не особо

Похожие вопросы