Question

这是一个例子：http://jsfiddle.net/spadez/PduBG/7/

我的问题是从CSS的角度来看，这样做是错误的：

.header {
    background-color: pink;
    padding: 20px
}
.header ul {
    float: right;
}
.header ul li {
    display: inline;
    padding: 10px;
}

相反，这样的事情会更好：

.header {
    background-color: pink;
    padding: 20px
}
#header_list {
    float: right;
}
#header_listitem {
    display: inline;
    padding: 10px;
}

Answer 1

这里没有真正的对错。

从技术上讲，第二个选项渲染速度更快，因为浏览器只需要扫描ID而不是检查元素的嵌套，但实际上除非你有一个庞大的文档，否则它不会引人注意。

要确定最佳方法，您需要检查您的语义：

您想要设置标题中所有列表项的样式吗？选择第一种方法

你想要特定项目的样式吗？选择第二种方法

Answer 2

你可以这样做命名标题-----＆gt; .header 将你的名字命名为ul ----＆gt; #header_list

.header {
    background-color: pink;
    padding: 20px
}
#header_list {
    float: right;
}
#header_list li {
    display: inline;
    padding: 10px;
}

Answer 3

取决于您的方案。如果您使用Id选择器，这将应用于具有此id的所有控件。如果使用类选择器，它可以灵活地在几个元素上有选择地设置样式。

CSS命名约定 - 嵌套CSS

3 个答案: