CSS中ID和类的区别答案

【问题标题】：difference between IDs and class in CSSCSS中ID和类的区别
【发布时间】：2015-04-02 05:39:05
【问题描述】：

根据ID的定义，同一个ID不能在同一个网页中多次使用，也不能对同一个网页上的多个不同元素使用，而且我们只能对任何元素使用一个ID，多个ID不能在一个元素上同时使用.

在下面的示例中，我对不同的元素使用相同的 ID，并且还使用相同的 ID 来定义不同的规则。但它仍然按预期工作。有人可以解释一下这里到底发生了什么。

 <html>
 <head>
  <style type = "text/css">
        .redtext{color:red;}
        .greentext{color:green;}
        .fontweight{font-weight:bold;}
        #Barcelona{color:blue;}
        #Chelsea{color:yellow;}
        #Chelsea {color:blue;}

    </style>
  </head>
    <body>

      <p class= "redtext"> I want this paragraph to be RED </p>
      <p class = "greentext"> I want this paragraph to be GREEN</p>
      <div id = "Chelsea"> Liverpool want this one on  bottom right  </div>
      <div id = "Chelsea"> Liverpool want this one on bottom left </div>

      <p id = "Chelsea"> I want this paragraph to be GREEN</p>
      <h1 id = "Barcelona"> multiple usage of same id </h1>
      <p class= "fontweight redtext"> am I in bold ?</p>
      </body>

     </html>

运行此脚本后的输出。

我希望这一段是红色的

我希望这一段是绿色的

利物浦想要这个在右下角利物浦想要这个在左下角我希望这一段是绿色的

同一个id多次使用

我是粗体吗？

运行此示例后，我可以说 ID 可以用于多个元素，并且相同的 ID 可以定义不同的样式。

请帮助我理解这一点。

【问题讨论】：

仅仅因为您可以多次使用相同的id 并不能使它成为有效的HTML。在文档中多次使用相同的id 将导致它无法通过任何验证。并且在该文档上运行的 CSS 和 JavaScript 可能具有未定义的行为。

标签： html css

【解决方案1】：

你可以去here找出区别

要立即回答，您不能在一个文档中拥有两个名称相同但属性不同的 ID。您也可能不会在一组引用中包含两个不同的引用。

虽然，你不能在一个文档中拥有具有不同属性的相同类名这一事实仍然适用，但你可能在一对引用中具有不同的类'

对于一个类中的多个id，

class="类名类名"

这会起作用

id="idname idname"

这行不通

如果我没有回答您的具体问题，请告诉我。

【讨论】：

是的，具有不同属性的相同 id 仍然有效，这就像方法重载。但是当尝试具有多个 Id 的元素时不起作用。所以 class 相对于 Ids 唯一真正的实现优势是多个 class 可以同时用于一个元素。

【解决方案2】：

id 必须是唯一的，我注意，属性“id”不能有两个具有相同值的元素，而类可以在多个元素中顺利使用。此外，“id”比类更强大，通过其“id”定位元素的 CSS 规则将比使用它们的类更强大。

【讨论】：