CSS селекторы: (меню уль LI) или (меню Li)

Question

, который лучше для использования

.menu{ 
    float:left; 
    width:600px; 
    height:25px; 
    background:url(bg.png) repeat-x; 

} 
.menu ul{ 
    float:left; 
} 
.menu ul li{ 
    float:left; 
    width:150px; 
    height:25px; 
    background:#F00; 
} 

или

.menu{ 
    float:left; 
    width:600px; 
    height:25px; 
    background:url(bg.png) repeat-x; 

} 
.menu ul{ 
    float:left; 
} 
.menu li{ 
    float:left; 
    width:150px; 
    height:25px; 
    background:#F00; 
} 

, какой тег является правильным menu ul li или menu li?

Answer 1

Когда вы говорите which tag is right menu ul li or menu li?, вы говорите о DIV с class="menu" или вы говорите о deprecated menu tag (<menu>)?

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

.menu > ul > li{ 
    // this matches only list items directly inside a ul directly inside a .menu 
} 

еще лучше было бы так:

#menu > ul > li{ 
    // now you are referencing the menu by id, so you know this is a unique assignment 
} 

или, если у вас есть несколько меню:

#menubar > .menu > ul > li{ 
} 

потому что в противном случае у вас есть сюрпризы, у вас может быть такая структура: (это уродливо, я знаю, но просто чтобы доказать точку)

<div class="menu"> 
    <ul> 
     <li>Menu Item 1</li> 
     <li>Menu Item 2</li> 
     <li>Menu Item 3 
     <ul> 
      <li id="abc">Menu Item abc</li> 
     </ul> 
     </li> 
     <li>Menu Item 4 
     <div><div><div><ol><li><div><ul> 
       <li id="xyz">Menu Item xyz</li> 
     </ul></div></li></ol></div></div></div> 
     </li> 
    </ul> 
</div> 

(вы, вероятно, не хотите соответствовать элементам abc или xyz).

Answer 2

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

Answer 3

Если у вас нет списков заказов (<ol>) внутри .menu контейнеров, результат будет таким же. Некоторые, вероятно, скажут, что один быстрее, чем другой, но это не имеет значения (и трудно доказать, что он может различаться в каждом браузере)

Answer 4

Это зависит. Если у вас есть ol и ul в пределах .menu, вы хотите использовать более конкретные .menu ul li. В противном случае .menu li в порядке. Вам может понравиться read up on CSS specifity.

Answer 5

Ваших селекторы должны соответствовать вашему намерению - если вы имеете в виду для любого элемента списка, независимо от того, является ли он внутри UL или OL быть стилизованным то же самым, то пример B. Если это только UL LI систем вы хотите стиль, то A.

Это довольно простой пример, но это полезное эмпирическое правило. Спросите себя: «Если кто-то пришел и застрял упорядоченный список внутри .menu, как бы я хотел, чтобы он выглядел?

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

Answer 6

Mozilla DevCenter рекомендуют использовать .menu li. Вы можете красны больше о Writing Efficient CSS и оптимизации кода CSS. Лично я использую <ul id='menu'> и затем #menu { display: block; margin: 0; padding: 0 }.