2

I have a multi level navigation menu on my page consisting of an unordered list. That list has the class menu, like so:

<ul class="menu">
    <li><a href="#">Category 1</a></li>
    <li><a href="#">Category 2</a></li>
    <li><a href="#">Category 3</a>
        <ul>
            <li><a href="#">Subcategory 1</a></li>
            <li><a href="#">Subcategory 2</a></li>
        </ul>
    </li>
</ul>

The href attributes are set to # for illustration purposes.

My question is: What is the best Selector to use for that kind of menu regarding speed?

At the moment I am using something along these lines (again, just for illustration, there are rules missing):

.menu {
    background-color: #CCC;
}

.menu li {
    background-color: #FFF;
}

.menu li > ul li ul {
    background-color: #333;
}

Is a class the fastest selector in that case? Or should I use something like .navigation-container ul? Do you have any recommendations?

4

2 に答える 2

4

単純なセレクターは、複雑なセレクターよりも高速です。たとえば、.menuよりも高速ですが.menu ul、劇的な違いはありません。

あなたが持っているものは大丈夫です。複雑さを.menu li > ul li ul軽減することもできますが、レンダリング時間を 1 ～ 2 ミリ秒短縮できる可能性があるため、違いに気付くことは期待できません。

効率的な CSS セレクターについての読み物は次のとおりです。

于 2013-09-17T18:07:36.780 に答える
1

#menu、#menu li などの ID で参照する方が高速です。サブULタグにもIDを追加します:)

于 2013-09-17T17:58:09.063 に答える