CSS 内部 id 选择器答案

【问题标题】：CSS inner id selectorsCSS 内部 id 选择器
【发布时间】：2011-07-27 13:51:20
【问题描述】：

我在 CSS 文件中有以下 id 选择器。 Headerphoto 和 logo-box 是 header id 的内部 id-selector。我真的需要将这两个添加为内部 id-selector 吗？我可以将它们添加为普通的 id 选择器。这样做的最佳方法是什么？有什么好处和坏处？

谢谢！

/* Header styles */
#header {
    position: relative;
    height: 176px;
    text-align: left;       
    margin: 0; padding: 0;  
    background: #FFF;
}

#header #headerphoto {
    position: absolute;
    right: 15px ; top: 15px;
    width: 455px;
    height: 156px;
    background: #FFF url(headerphoto.jpg) no-repeat;
}

#header #logo-box {
    position: absolute;
    left: 15px ; top: 15px;
    width: 280px;
    height: 156px;  
    background:#1c1e27;
}

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

只要每个页面上只存在#headerphoto 和#logo-box 中的一个，并且您确定这三个元素的结构相同，就没有关系。

如果在某些页面上，#headerphoto 和 #logo-box 出现在没有 id="header" 的元素中，则添加 #header ID 仅真正很重要，使用您的样式表通过所有这些页面，并且当且仅当这些元素在该页面中时，您希望样式应用。但是在这种情况下，那会让你的页面结构相当不一致，不是吗？

关于性能，嵌套 ID 选择器是更快、更慢还是相同，我不在乎，样式表作者也不应该在意，因为 ID 选择器已经是最快的 无论如何。

【讨论】：

再一次，有时我添加外部 ID 选择器只是为了在我的样式表中将这些元素逻辑地组合在一起。例如，这些元素在#header 中找到，因此它们有些相关。添加#header 选择器直观地表明了这种关系。所以在某种程度上，代码记录了自己。现在，我真的可以改用 cmets，但说真的，我不在乎。
谢谢 :-) 您对以下“Jochen Hilgers”的回答有何看法？
@CharithJ：不太确定。
无论如何，我决定保留它们，因为正如您所提到的那样，它们在逻辑上分组。再次感谢。

【解决方案2】：

您不必添加#header 选择器，但我听说选择器声明得越精确，页面呈现速度就越快。在我看来，这并不重要。

【讨论】：