CSS选择器：(menu ul li)或(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)。

Answer 2

除非您必须在同一样式表中与其他类似的选择器进行交互，否则这没有什么区别--然后它取决于这些选择器是什么。

Answer 3

那得看情况。如果您在.menu中有一个ol和一个ul，那么您将希望使用更具体的.menu ul li。否则，.menu li就很好了。你可能会喜欢read up on CSS specifity。