ul # menu vs #menu?

Question

HTML:

<ul id="menu"> 
    <li><a href="" class="active">Portfolio</a></li> 
    <li><a href="">Services</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Testimonials</a></li> 
    <li><a href="">Request a Quote</a></li> 
</ul> 

CSS:

ul#menu li { 
    display:inline; 
    margin-left:12px; 
} 

Есть ли разница между использованием "ul#menu li" и просто "#menu li"? Я использовал обе версии, и они, похоже, выполняют одно и то же. Есть ли причина, почему большинство учебных пособий используют «ul» перед идентификатором?

Answer 1

Существует одна очевидная разница и еще одна тонкая разница.

Очевидное различие в том, что #menu цели все элементы с ID #menu, в то время как только ul#menu целевых показателей ul элементов. Если вы указали только ID #menu на ul, селектора всегда будут иметь одинаковый результат.

Существует одна потенциальная разница с чем-то названным специфичностью. Это способ определить, какое правило использовать в случае конфликтов. Так что если у вас есть эти два правила:

#menu li {color: blue;} 
ul#menu li {color: red;} 

второе правило победит, потому что она более конкретна, и текст будет красным. Правила специфичности сложны и не всегда интуитивны, но в этом случае простой результат состоит в том, что ul#menu li немного более конкретный, чем #menu li. Если у вас только одна таблица стилей, это вряд ли будет проблемой для вас.Если у вас несколько таблиц стилей, может возникнуть проблема с тем, почему какое-то правило игнорируется; Специфичность часто является ответом.

Что касается того, почему большинство учебников используют ul#menu, я не знаю. (На самом деле, у меня есть только ваше утверждение как доказательство того, что они делают!) Я предполагаю, что они делают вещи действительно очень очевидными ради читателей-идиотов.

Answer 2

Полученные результаты не будут отличаться для этих конкретных элементов.

Однако ul#menu li более специфичен, так как она предназначена для всех элементов типа li с идентификатором родительского #menu и типом ul.

• Представьте селектор типа UL> #menu> LI

#menu li только предназначается для всех элементов типа li с идентификатором родительского #menu.

• Представьте селектор как #menu> LI

В большинстве случаев, они будут делать то же самое. #menu li не должен влиять на другие элементы на странице, так как идентификатор определен, и поэтому, как предлагается в комментариях ниже, это не нужно. Таким образом, я бы придерживался #menu li.

Answer 3

Разница в специфике. ul#menu более определен и считает, что элемент, который должен иметь цель, должен быть <ul>, который имеет идентификатор меню. Скажем, вы меняете свой <ul> на <div>, у которого есть идентификатор меню, который не будет работать (без изменения вашего css). Также, если вы определите что-то только с #menu, вы можете добавить переопределения, сделав правило более конкретным, используя ul#menu. Вы можете прочитать здесь: battle-of-the-selectors-specificity.

Answer 4

Разница в специфике между двумя не будет часто иметь значение, но мы могли бы думать об обстоятельствах, в которых это произойдет.

Что делать, если у вас есть <div id="menu"></div> на одной странице и <ul id="menu"></ul> на другом, и вы используете тот же файл CSS в обоих случаях? Я не говорю, что это было бы хорошим дизайнерским решением, но в этом случае важное значение имеет различие между ul#menu и #menu. Вы хотите, чтобы CSS применялся ко всем элементам с id="menu" или только ul элементами с id="menu"? Это различие.

Answer 5

Я хотел бы дать тот же ответ, как @jacktheripper, но хочу добавить следующее:

Да, ul#menu li более специфичен, но она также требует больше времени синтаксического анализа, так как CSS читает селекторы из права налево. Таким образом, он выбирает все элементы #menu, а затем собирает все UL -листы и выбирает те, которые содержат ранее найденные #menu.

Это делает большую разницу при использовании длинных цепей селекторов: #mainmenu ul.menu li.current ul li.current (вместо, может быть, #mainmenu .current .current).