2012-03-24 85 views
2

根据CSS原则时,我们要实现的款式可重用性,我们应该使用class属性,当我们知道有在整个DOM结构中的独特元素我们应该使用该元素的id属性,然后指定样式。差异属性在HTML和CSS

但在这个时代的Web应用程序,DOM结构过于复杂且有重复id的可能性。最好的例子是#title。它的名字可以出现在文件的任何地方。现在最好的部分是,如果我使用#title.title定义样式(假设它们已经出现不止一次且具有不同的父级),那么CSS生成的样式是相同的。这的jsfiddle将有助于你明白我的意思http://jsfiddle.net/dewbot/LGAQD/

我下的印象是一样JS渲染,CSS解析器停止迭代时,发现第一#title但它不会发生这不断重复,直到它到达EOF就像class 。所以这就产生了一个问题,为什么我们应该使用多个class而不是id

回答

4

所以出现这种情况,我们为什么要使用多个class,而不是id一个问题吗?

Because the HTML spec says so,违反规则通常会导致代码被破坏。

是否有意义由同一个ID识别多个元素?我想不是。这是什么类的:分类类似的元素。

现在最好的部分是,如果我使用#title.title而定义样式(假定他们已经出现了不止一次,并有不同的父)的CSS生成是相同的输出。

这是自然的行为,并且在这样做本身任何浏览器不是一个错误。不过,这不是你应该依赖的那种行为,因为它处理不符合标准的标记,这通常是不好的。

我是根据印象,就像JS渲染,CSS解析器停止迭代时,发现第一#title但它不会发生这不断重复,直到它到达EOF就像class

现在,这是错误的。 CSS解析器在每个元素的基础上做匹配的选择器:他们没有遵循一条规则并遍历DOM,将它应用于与它匹配的任何元素;相反,他们采取每个元素,并尝试将其与尽可能多的规则进行匹配。以这种方式工作,解析器不知道 ID是否已在文档的其他地方使用过,也不在意。它根据元素说的是简单匹配This answer覆盖更详细。

只要元素具有特定的ID,它就必须匹配任何查找该特定ID的ID选择器。因此,解析器希望将具有给定ID的任何和所有元素都匹配到单个ID选择器,即使在HTML中,具有相同ID的多个元素也是不正确的。换句话说,CSS不强制HTML所需的唯一ID。 This answer解释。

综上所述,底线是:在一次时只为一个元素分配ID,并使用类来分组多个相似的元素。 不要试图变得聪明并遵守规则。

+0

_Does很有意义通过与我所说的复杂DOM结构相同的ID_来识别多个元素。如果一个元素的工作是作为标题,那么它将具有“标识”作为“标题”。但@Anubhav在这里指定的命名约定是我真正想要的。 反正那些链接是好读。大帮助!谢谢 – 2012-03-24 08:24:45

+1

@dewbot:无论它是多么复杂或使用什么命名约定都无关紧要。它仍然是一个单一的DOM结构,并且规则说一个ID一次只能出现在单个文档中一次**。这就是我所驾驶的。 – BoltClock 2012-03-24 08:25:47

4

我认为你有CSS错误的解析。浏览器不会通过CSS文件行进行排序,并将样式应用于HTML文件中的元素,反之亦然。浏览器解析HTML,并且每当它找到classid属性时,它就会在CSS文件中查找它。 (这是非常简单的,但它有助于明白)。

仅仅因为浏览器正确地呈现它,如果你有多个id s并不意味着你应该这样做。 standardclearly says表示id具有是唯一的。

1

你已经自己回答了。

CSS确实将它应用于所有可以找到的id s和class。但是,JS/jQuery将首先实现它。

所以,你的问题就变成了:

,我应该使用相同的id s到了JS操纵许多元素?答案:Baaaaa .... D决定

我是否应该将相同的id的许多元素用于CSS?答:还差,决定!但会实现你的规则

你还应该尝试使用以分层方式应用的CSS和JS规则,这样,你永远不会出错。像,#Heading div#Title{css rules here}$('#Heading div#Titles')...jQuery rules here

接下来的事情是尝试以保守的方式实施ids。

然后,尝试为您的网站/应用中的元素提供唯一的ID,而不是单个页面。这将为您节省您在页面中包含的多页实用程序脚本。

例如:标题上的主页页面的顶部:#Home-Top-Heading

希望它能帮助。