Селекторы CSS: (меню ul 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" или говорите о устаревшем теге меню (<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

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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