CSS内部ID选择器 [英] CSS inner id selectors

问题描述

我有一个CSS文件中的id选择器。 Headerphoto和logo-box是标题id的内部id选择器。我真的需要添加这两个作为内部id选择器吗？我可以将它们添加为正常的ID选择器。什么是最好的方法这样做？

  / 
 *标题样式* / 
 #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; 
} 
  

解决方案

只要每个页面上只有一个 #headerphoto 和＃logo-box 这三个元素将是相同的。

只有真的才能添加 #header ID如果在某些页面上， #headerphoto 和＃logo-box id =header，所有这些页面都使用您的样式表，并且当且仅当这些元素在该样式表中时，才需要应用样式。但是在这种情况下，这会使你的页面结构不一致，不是吗？

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

I've got below id selectors in a CSS file. Headerphoto and logo-box are inner id-selectors of header id. Do I really need to add those two as inner id-selectors? I can add them as just normal id selectors. What is the best way of doing this? What are the pros and cons?

Thank you!

/* 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;
}

解决方案

It doesn't matter as long as only one of #headerphoto and #logo-box exist on each page and you're sure the structure for these three elements will be the same.

It only really matters to add the #header ID if, on some pages, #headerphoto and #logo-box appear in elements that don't have id="header", your stylesheet is used by all these pages, and you want the styles to apply if and only if these elements are in that one. But in such a case, that'd make your page structure rather inconsistent, wouldn't it?

Regarding performance, whether it's faster, slower or the same to nest ID selectors, I don't care, and neither should you, the stylesheet author, since ID selectors are already the fastest anyway.

这篇关于CSS内部ID选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！