在HTML和CSS中使用MULTIPLE'id'和'class'属性之间的区别 [英] difference between using MULTIPLE 'id' and 'class' attributes in HTML and CSS

问题描述

根据CSS原则，当我们想要实现样式的可重用性时，我们应该使用 class 属性，并且当我们知道整个DOM结构中存在唯一元素时，我们应该使用 id 属性添加到该元素，然后指定样式。

但是在这个Web应用程序的时代，DOM结构可能过于复杂，并且可能存在重复 id 。最好的例子是 #title 。它的名字可以出现在文件的任何地方。现在最好的部分是如果我在定义样式时使用 #title 或 .title （假设它们已经出现了更多比一次产生的CSS有不同的父输出）是相同的。这个jsfiddle将帮助你理解我的意思 http://jsfiddle.net/dewbot/LGAQD/

我的印象就像JS Renderer一样，CSS Parser在发现第一个 #title 时暂停迭代，但它不会发生，它会一直保持迭代，直到达到EOF，就像 class 。所以这就产生了一个问题，为什么我们应该使用多个 class 而不是 id ？

<为什么我们应该使用多个 class 而不是 code> id ？

因为HTML规范是这么说的，违反规则通常会导致代码被破坏。

通过同一个ID识别多个元素是否有意义？我想不是。这就是类的用途：对类似元素进行分类。

现在最好的部分是如果我使用 #title 或 .title ，同时定义样式（假设它们已经出现了多次并且具有不同的父类）生成是相同的。

这是自然的行为，而不是任何浏览器中的错误本身。尽管如此，它并不是你应该依赖的那种行为，因为它处理不符合标准的标记，通常很糟糕。

我的印象就是像JS Renderer一样，CSS Parser在发现第一个 #title 时停止迭代，但它不会发生，它会继续迭代直到达到EOF，就像 class 。

现在这是错误的。 CSS解析器在每个元素的基础上进行选择器匹配 ：他们不需要遵循规则并遍历DOM，并将其应用于任何与之匹配的元素;相反，他们采取每个元素，并尝试将其与尽可能多的规则进行匹配。以这种方式工作，解析器不知道ID是否已经在文档中的其他地方使用，也不关心。它根据元素所说的 匹配。 此答案详细介绍了它。

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

综上所述，底部行是：一次只为一个元素分配一个ID ，并使用类来分组多个相似的元素。 不要试图聪明地遵守规则。

According to CSS principles when we want to implement reusability of styles we should use class attribute and when we know that there is an unique element in whole DOM structure we should use id attribute to that Element and then specify a style.

But in this era of Web Applications, DOM structure can be too complex and there is a possibility of duplicate id. Best example would be #title. Its kind of name which can appear anywhere in the document. Now the best part is if I use #title or .title while defining styles (assuming that they have been appeared more than once and have different parent) output which CSS generates is same. This jsfiddle will help you understand what I mean http://jsfiddle.net/dewbot/LGAQD/

I was under impression that just like JS Renderer, CSS Parser halts the iteration when it discovers first #title but it does not happen it keeps on iteration till it reaches EOF just like class. So this arises a question why should we use multiple class and not id?

解决方案

So this arises a question why should we use multiple class and not id?

Because the HTML spec says so, and breaking the rules often results in broken code.

Does it make sense to identify multiple elements by the same ID? I think not. That's what classes are for: to classify similar elements.

Now the best part is if I use #title or .title while defining styles (assuming that they have been appeared more than once and have different parent) output which CSS generates is same.

This is natural behavior, and not a bug in any browsers that do this per se. Still, it is not the kind of behavior that you should rely on as it deals with non-conformant markup, which is usually bad.

I was under impression that just like JS Renderer, CSS Parser halts the iteration when it discovers first #title but it does not happen it keeps on iteration till it reaches EOF just like class.

Now this is wrong. CSS parsers do selector matching on a per-element basis: they don't take a rule and walk through the DOM applying it to whatever elements match it; instead, they take each element and attempt to match it against as many rules as possible. Working this way, a parser doesn't know whether an ID is already in use elsewhere in the document, nor does it care. It simply matches according to what the element says it is. This answer covers it in greater detail.

As long as an element has a certain ID, it must match against any ID selectors looking for that specific ID. So, parsers are expected to match any and all elements with a given ID to a single ID selector, even though in HTML it's not correct to have multiple elements with the same ID. In other words, CSS does not enforce the uniqueness of IDs that is required of HTML. This answer explains.

With all that said, the bottom line is: assign an ID to only one element at a time, and use classes for grouping multiple similar elements. Don't try to be clever and bend the rules.

这篇关于在HTML和CSS中使用MULTIPLE'id'和'class'属性之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！