Question

我听说ID是唯一的，只能在一个页面中使用一次，但在页面上多次使用时它的工作正常。请让我知道ID的目的，并将其与课程完全不同？

@HTML FILE

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <LINK href="special.css" rel="stylesheet" type="text/css">
   <title>Untitled Document</title>
   </head>

    <body>
    <div class="layout">
    <div class="left_box">
    <div id="color"></div>
   </div>

   <div class="right_box">
    <div id="color"></div>
    </div>
     </div>
   </body>
   </html>

@CSS FILE

      @charset "utf-8";
     /* CSS Document */
     .layout {
 width:600px;
  height:600px;
  background-color:#666;
  margin:0 auto;
      }

     .left_box {
  width:300px;
  height:600px;
  float:left;
        }

    .right_box {
 width:300px;
 height:600px;
 float:right;
    }

    #color {
background-color:#CCC;
height:600px;
    }

Answer 1

我听说ID是唯一的，只能在页面中使用一次

这是一条HTML规则，与CSS无关。

但在页面上多次使用时，它的工作正常。

浏览器执行错误恢复。不要依赖它，因为并非所有浏览器都会以相同的方式从所有错误中恢复。写valid标记。

请让我知道ID的目的，并将其与课程完全不同？

在HTML术语中 - 每个文档的ID都是唯一的，可以是链接目标。一个类可以重用。

在CSS术语中 - id选择器的specificity高于类选择器。

Answer 2

你听错了。您看到的行为是因为浏览器被编码为非常容易面对严重违反HTML标准的行为。

即使出现“坏”数据，它们已被编码为有效的事实背后的想法是，对于技术不太熟练的用户，如果某些东西不起作用，则是浏览器的错误。浏览器被迫使用tag soup，这是合乎逻辑的扩展。

Answer 3

如果我可以使用汽车的类比：

ID is like a Registration Plate

应该是唯一的 - 允许您唯一地识别和设计单个元素

Class is like a Vehicle Model

允许您一次性处理一组相关元素。

继续使用anaology：

在汽车仍在工作的情况下复制登记牌是可以的 - 但是警察会非常恼火！你如何确定一个特定的驾驶员超速驾驶？

同样适用于HTML元素 - 重复使用相同的ID只会阻止您在需要时识别单个元素。

Answer 4

对多个项目使用相同的ID会导致HTML无效。

简单的答案就是这样。如果您多次使用ID（唯一标识符），则会使您的HTML无效。

正如口香糖可用于将绘画贴在墙上一样，同样的ID 可以多次使用，因为HTML不会以严苛的方式处理错误。它仍然无法使其正确或甚至不能很好地利用属性。

设计类以便您可以关联页面上的多个元素。这就是它的设计目标。

Answer 5

在使用JQuery / Javascript等时，ID用于引用某些元素，因此从技术上讲，如果您希望使用这些功能，那么页面上的ID应该是唯一的。

如果你只是对造型感到困扰，那么它确实不是一个大问题，尽管它不是有效的做法。

Answer 6

如果您关心XHTML / HTML验证，那么您应该使用唯一ID。

见：

Class vs. ID

和

Why must the ID attribute be unique on each page?

希望它有所帮助。

Answer 7

在CSS术语中，ID比类更快找到。

您应该使用类来重复使用。

EG：

@CSS

.displayNone
{
    display:none;
}

Answer 8

这里充满了困惑。事实证明，每个人都是对的。以下是事实：

 1. CSS doesn't care much which you use, as far as actually applying
    styling. ID's are technically faster for a browser rendering engine,
    but other than the most extreme of circumstances you'll probably
    never notice a speed difference
 2. . JavaScript cares very much about ID's. It can be noticeably faster
    for JavaScript to find an element by an ID. And this is where the
    "uniqueness" is very important. JavaScript will only find the
    "first" element with that ID, so if you have multiple on the page,
    confusion may ensue.
 3. ID's have an infinitely higher specificity value than classes. If
    there is an element with an ID and a class and they both apply
    styles, the styles applied by the ID will take precedence over the
    styles applied by the class. This can be useful, this can be a
    hindrance.

这是最简单的例子

#id    { color: red; }
.class { color: green; }

这只是一个属性，它在语法上看似随意，这取决于你使用的是哪一个。结果是可预测的：

<div id="id">Would be red</div>
<span id="id">Would be red</div>

<div class="class">Would be green</div>
<span class="class">Would be green</div>

<强> REFERENCE

CSS中的ID与CLASS。请用例子详细说明

8 个答案: