html - CSS 选择器 : (menu ul li) or (menu 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或者你在谈论 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)。