Какая разница?

[tigrus2014]

Здравствуйте! Подскажите пожалуйста. Вот не могу понять... К примеру есть маркированный список.

<div class="menu"><ul><li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li><li><a href="#">Ссылка 3</a></li></ul></div>

Дальше css код

.menu li {какой-то CSS стиль}

То есть ВСЕМ элементам li класса menu задаём "какой-то стиль" ? Верно?

.menu ul li {какой-то CSS стиль}

А тут что? Мы ведь по сути к тем же спискам li обращаемся? Зачем тут ul?

[klierik]

я приведу пример как в данном случае можно обратится к <a>

a {}li a {}ul a {}ul li a {}div a {}div ul a {}div ul li a {}div li a {}.menu a {}.menu li a {}.menu ul li a {}.menu ul a {}

может что-то упустил, но не суть важно.

 

Дело в том что обратится к <a> существует множество путей, а вот какой именно выбрать -- зависит от конкретной задачи и конкретного кода.

[rus]

грубо говоря, вы обращаетесь к элементу через doom, если к примеру была бы иная структура, типа:

<div class="menu">    <p><ul><li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li><li><a href="#">Ссылка 3</a></li></ul>    </p></div>

и

<div class="menu">    <div><ul><li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li><li><a href="#">Ссылка 3</a></li></ul>    </div></div>

то в .css как бы вы обратились к первому блоку меню и как ко второму?

но по сути ul в .css в вашем примере может и не быть, он не обязателен, это просто предусмотрено спецификацией.

это как в зданиях: есть пожарный выход и огнетушитель, но не пользоваться же ими каждый день?!

[tigrus2014]

грубо говоря, вы обращаетесь к элементу через doom, если к примеру была бы иная структура, типа:

<div class="menu">    <p><ul><li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li><li><a href="#">Ссылка 3</a></li></ul>    </p></div>

и

<div class="menu">    <div><ul><li><a href="#">Ссылка 1</a></li><li><a href="#">Ссылка 2</a></li><li><a href="#">Ссылка 3</a></li></ul>    </div></div>

то в .css как бы вы обратились к первому блоку меню и как ко второму?

но по сути ul в .css в вашем примере может и не быть, он не обязателен, это просто предусмотрено спецификацией.

это как в зданиях: есть пожарный выход и огнетушитель, но не пользоваться же ими каждый день?!

Но если мы пишем .menu ul li ,  то свойство к .menu и к ul и к li применится? Или только к Li? У меня собственно такая история. Взял картинку JPG из инета с сайтом., пытаюсь сверстать меню как там.  Проблема в том,, что первые два пункта меню отображаются другим цветом, шрифт другой и отступы между ними другие. Я этим двум li задал одинаковые классы Остальные форматируются через menu ul и menu ll. Вроде делал всё правильно, но проблемы с бекграундом этих двух пунктов,... со всем короче.   Понимаю что дело в наследовании, но.... как следует НА ПРАКТИКЕ наследования не понимаю И ещё... Кто-то пробовал брать картинку бекграундом и по ней всё выстраивать, естественно в HtML и CSS (не блоки с картинками)? Но всмысле вместо сетки?   Сработает такое?

Edited September 23, 2014 by tigrus2014

[Great Rash]

Вкладывать <ul> в <p> не надо, rus, зачем ты так?

Забейте, между .menu ul li и .menu li разницы нет никакой вообще, т.к. <li> без <ul> не встретится никогда.

[Galaxy]

Полагаю проблема не в наследовании , а в приоритетности и ,возможно, в перезаписывании свойств.

[rus]

Вкладывать <ul> в <p> не надо, rus, зачем ты так?

да собственно хотел какой-нибудь пример привести, а что?

<p> как и <ul> - блочные элементы, кто-то мешает блочный в блочный вставлять?

[sigma77]

<p> как и <ul> - блочные элементы, кто-то мешает блочный в блочный вставлять?

Браузеры и спецификация?

В данном случае p закроется срозу перед открывающим ul

[SelenIT]

если к примеру была бы иная структура, типа:

<div class="menu">

<p>

<ul>

<li><a href="#">Ссылка 1</a></li>

<li><a href="#">Ссылка 2</a></li>

<li><a href="#">Ссылка 3</a></li>

</ul>

</p>

</div>

 

Неа. Не была бы

 

 

между .menu ul li и .menu li разницы нет никакой вообще, т.к. <li> без <ul> не встретится никогда.

 

<li> может встретиться в <ol> . И минимальная (на последнюю единичку), но всё же разница в специфичности.

 

 

<p> как и <ul> - блочные элементы, кто-то мешает блочный в блочный вставлять?

 

Блочные и строчные были в HTML4, и это было ошибкой. В HTML5 есть потоковые, фразовые, интерактивные и т.п., но вообще у каждого своя Content model. Случай с <p> - самый явный пример, почему делить элементы в HTML на блочные и строчные плохо.

Edited September 23, 2014 by SelenIT

[rus]

т.е. в данном случае это просто не семантично?

[tigrus2014]

 

Вкладывать <ul> в <p> не надо, rus, зачем ты так?

да собственно хотел какой-нибудь пример привести, а что?

<p> как и <ul> - блочные элементы, кто-то мешает блочный в блочный вставлять?

 

Никто не мешает! Но мне ЛИЧНО сдаётся, что это всё равно что писать верблюд,  верблюд жует колючку. Вместо верблюд жуёт колючку. И тот и тот блочный и у обоих свойства. Что такого в теги <p> чего нет в <ul>? Что касаемо моего примера мне важно знать как в моем примере происходит наследование.? А потом уже смотреть на приоритетность и т.д.  Я отдельно задавал свойства .menu ul и menu il Дык может их объеденить в menu ul ii?

[rus]

Вы не понимаете, в вашем случае вообще нет наследования, вы просто в одном случае обращаетесь к солдату напрямую, а в другом через сержанта.

Ок. Вот такой пример тогда что бы все соотв. стандартам:

<div class="menu"><p><a href="#">Ссылка 1</a></p><div><a href="#">Ссылка 1</a></div></div>

.menu a {...style... // для всех тегов a}.menu p a {...style... // для a который в p}.menu div a {...style... // для a который в div}

[tigrus2014]

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

.  Не знаю... Вот как я мыслю.. Если мы пишем .menu ui li и задаём бекграунд в css... У нас получится что .menu  с бекграундом, ui с ним же и все последующие li с ним же?  То есть бакгроунд  у трёх тегов и у остальных li из этого списка....?  Или я ошибаюсь?

[sigma77]

Если мы пишем .menu ui li и задаём бекграунд в css...

.menu ul li {background;silver;}

 серый фон у всех li, которые являются потомками ul, который является потомком любого элемента с классом menu

.menu,ul,li {  background;silver;}

Серый фон у всех элементов  классом menu, у всех элементов ul, у всех элементов li.

http://htmlbook.ru/samcss/selektory-tegov - начните с изучения этой темы и далее по-порядку.

[rus]

я вам привел пример на основе обращения между рядовыми и офицерами в армии - для вашего понимания.

по вашему все что прапорщик через сержанта передал солдату, сержанту на пару делать с ним?

[sigma77]

т.е. в данном случае это просто не семантично?

Дело не в семантичности. Спека напрямую запрещает вкладывать что-то в абзацы помимо строк.

Тег <p> является самозакрывающимся. Т.е. для некоторых доктайпов закрытие его </p> не является обязательным. И он закроется сразу, как встретит что-то, что не является строкой.

http://clip2net.com/s/iXKlHz

http://jsfiddle.net/fainz777/LaL569wc/

[SelenIT]

для некоторых доктайпов закрытие его не является обязательным

Точнее, для любого HTML (1-5).

 

В X(HT)ML нет неявного закрытия по построению языка, но работает это только при полноценном XML-парсинге (application/xhtml+xml и т.п.). При text/html де-факто всё равно будет неявное закрытие.

[rus]

ясно. понял, спасибо.