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? ，你在談論一個帶有class="menu"的div，或者你在談論已棄用的菜單標簽 （ <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

這取決於。 如果你在.menu有一個ol和一個ul ，你會想要使用更具體的.menu ul li 。 否則， .menu li很好。 您可能希望了解CSS特性 。

Answer 4

除非您還要在.menu容器中訂購列表（ <ol> ）， 否則結果完全相同。 有些人可能會說一個比另一個更快，但這是無關緊要的（很難證明，因為它可能在每個瀏覽器中都有所不同）

Answer 5

您的選擇器應該與您的意圖相匹配 - 如果您的意思是任何列表項，無論它是在UL或OL中的樣式是否相同，那么示例B.如果它只是UL LI的樣式，那么A.

這是一個相當簡單的例子，但這是一個有用的經驗法則。 問問自己“如果有人來到並且列出了一個有序列表.menu，我怎么想讓它看起來？

這是一種很好的方法，可以使CSS保持恰當的特異性，同時保持其可應用的HTML結構的靈活性。

Answer 6

Mozilla Devcenter建議使用.menu li 。 您可以更多地了解編寫高效CSS和優化CSS代碼。 就個人而言，我使用<ul id='menu'>然后#menu { display: block; margin: 0; padding: 0 } #menu { display: block; margin: 0; padding: 0 } #menu { display: block; margin: 0; padding: 0 } 。