如果CSS选择器是#id，你需要确定它们的范围吗？

如果我有这样的结构：如果CSS选择器是#id，你需要确定它们的范围吗？

<div id="main"> 
    <div id="sidebar"> 
    <div id="tag-cloud"/> 
    </div> 
</div>

...什么是对CSS的最佳实践：

#main #sidebar #tag-cloud { ... } 
#tag-cloud { ... }

或者，如果id='main'是不是class='main'，会是更糟糕的范围是什么？我只是想知道，如果你有ID，你需要的范围？

来源

2010-09-27 Lance Pollard

哟你方便：http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg但请注意下面的答案。 – 2010-09-27 15:43:30

取决于。大多数时候，你可以说：

#tag-cloud { ... }

是最好的（性能明智的，见下文）。这：

#main #sidebar #tag-cloud { ... }

只是做了很多不必要的检查，必然成功。

除非要做到这一点：

#sidebar #tag-cloud { ... } 
#not-sidebar #tag-cloud { ... }

在不同的地方#tag-cloud是区分作用域定义了不同的外观。当然，你的页面中只能有一个#tag-cloud，但你的CSS可以处理这两种情况。

CSS检查从右到左完成。这：

#main #sidebar #tag-cloud { ... }

则计算结果为：“ID为tag-cloud具有与ID sidebar具有与ID main父父元素如果这是你的网站看起来如何反正，这只是一大堆没用DOM遍历。

如果你不修改网站结构，这在某种程度上违抗目的可言的事实，超过特定的，多余的作用域整个CSS必须在很多地方改变。

来源

2010-09-27 15:41:13 Tomalak

这显然是一个很好的技术答案。我认为这也是一个概念方面。如果“某事物”具有与“不同的事物”相同的ID，则与ID的整个想法相矛盾。一个ID应该唯一地定义一个单一的东西，所以两个不同的东西不应该有相同的ID。从布局的角度来看，侧栏tag_cloud与not_sidebar tag_cloud不同，所以这两个标签不应该有相同的ID。一个好主意是在ID前缀（例如＃sidebar_tag-cloud，＃not_sidebar_tag-cloud）@Lance Pollard – Rythmic 2012-06-16 01:21:26

@Rythmic我没有说有些东西可能具有相同的ID作为不同的东西。 – Tomalak 2012-06-16 07:14:48

我不是故意说你做的。对不起，如果这似乎。评论只是为了补充你的答案，从不同的角度反思它。 – Rythmic 2012-09-04 11:01:37

通常，您不应该在您的html文档中发生ID冲突。所以，从这个角度来看ID的确定是浪费时间。

但是，如果您错误地使用了相同ID的多个元素，则可能需要使用范围界定。但是这会导致无效的html，并可能导致其他不良后果，因此应该避免。

来源

2010-09-27 15:39:36 NotMe

的ID必须是唯一的一个文件中，除非你出于某种原因跨页共享它们，其中#something可以在另一页上不同的容器完全不同的事情，我只是用：

#tag-cloud { ... }

来源

2010-09-27 15:40:04

我认为它没有多大意义范围ids，但我更喜欢让我所有的其他选择器作用域为一个id。

也许你应该问自己，如果你需要所有的ID，或者如果有人应该有班或什么都没有。少即是多。

来源

2010-09-27 15:40:58

ID应该是独一无二的，所以应该确定范围是不必要的。一个好的JavaScript引擎将使用这些ID作为快速按ID查找元素的键，因此范围设定实际上会减慢速度。

但是，您可能会有一个具有多个ID的无效文档，在这种情况下，作用域将确保您不会意外击中多个元素。但在这种情况下，您应该确实修复您的ID。

来源

2010-09-27 15:41:17

我总是范围。您在此页面上只能有一个tag-cloud，但是您的网站的另一个区域可能有不同的tag-cloud，这需要不同的样式。

就我个人而言，我不会在我的CSS中使用ID。它们是限制性的，并且如果你的静态网站被改变为动态链接，那么ID就会被重新渲染（如ASP.NET），这会导致问题。

来源

2010-09-27 15:41:34 Curt

你已经自己说过了：ID是唯一的。所以，范围只会增加混乱。但如果他们故意出于纯粹的文档目的，我会用缩进规则来替换它们。

E.g.而不是

#main { 
    /**/ 
} 

#main #sidebar { 
    /**/ 
} 

#main #sidebar #tag-cloud { 
    /**/ 
}

做

#main { 
    /**/ 
} 

    #sidebar { 
     /**/ 
    } 

     #tag-cloud { 
      /**/ 
     }

来源

2010-09-27 15:42:09 BalusC

我更喜欢一般的缩进评论（因为你可能最终会深深地嵌套，你的样式表会变成80％的标签），但是很重要。 – annakata 2010-09-27 15:45:57

对于性能和打字而言，不确定范围也快得多。 – 2010-09-27 15:46:19

嵌套深度的ID可能表明设计中存在问题。我从来没有需要超过3，4，也许5个孩子的深度和相当复杂的网站。我顺便也通常在每个缩进上面放置一个（缩进）列的注释。 – BalusC 2010-09-27 15:54:27

最佳ID的做法是作为包装使用

<div id="main"><!--main wrapper--> 
    <div id="section"><!--section wrapper--> 
    <p>something</p> 
    </div> 
    <div id="sidebar"><!--sidebar wrapper--> 
    <div class="tag-cloud"> 
    </div> 

</div>

其更好的开始与最后一个ID

#sidebar #tag-cloud { ... }

AS根据谷歌页面速度火虫错误工具，建议使用较少的深度，因为CSS选择器

来源

2010-09-27 15:45:09

不，你不应该范围ID的，因为它们必须是每页独一无二。如果您有多个元素使用相同的ID，那么您的HTML将无法验证，并且在尝试通过javascript访问DOM时会导致问题。

例如，如果你有在页面上的多个标识的：

var myElements = document.getElementById('myduplicateid')

会回来才发现，相匹配的第一个元素可能不是期望的结果。

，如果您有任何关于未来与ID对similiarly组合的对象，我建议做这样的事情（单选按钮的例子）

<input type = "radio" id = "my_radio:1" value = "1" name = "my_radio"> 
<input type = "radio" id = "my_radio:2" value = "2" name = "my_radio">

在JavaScript的问题，那么您需要做这样的事情：

var my radio = document.getElementById('my_radio:1')

或者你正在使用jQuery，像这样：

var my radios = $('#my_radio\\:1') # Must escape colon with double slash since it's a special character in jQuery

来源

2010-09-27 15:45:14

回答

相关问题