CSS中ID和类之间的区别

时间:2015-04-01 21:00:36

标签: html css css3

根据定义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可以定义不同的样式。

请帮我理解这一点。

2 个答案:

答案 0 :(得分:0)

您可以通过here

找出差异

要立即回答,您不能在一个文档中拥有两个名称相同但属性不同的ID。您也可能在一组报价单中没有两个不同的。

但是,您在一个文档中不能使用具有不同属性的相同类名这一事实仍然适用,您可以在一对引文中使用不同的类&#39;

&GT;

对于一个班级中的多个ID,

  

class =&#34; classname classname&#34;

这可以在

时使用
  

id =&#34; idname idname&#34;

这不起作用

&GT;

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

答案 1 :(得分:0)

id必须是唯一的,我记得,你不能有两个元素具有相同的属性&#34; id&#34;,而类可以平滑地用在几个元素中。此外,&#34; id&#34;比类更强大的CSS规则通过它的&#34; id&#34;来定位元素。将比使用他们的班级更有力量。