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项).