类或ID

Question

  

重复：

     

  
• Cascading style sheets use “id” or “class”
  
• CSS: are class and id interchangeable?
  
• div class vs id
  
• CSS: div id VS. div class
  

有时候，当我想做一个选择时，为某些东西（图像）添加一个ID（唯一的），并且我在悬停或陈词滥调时使用jquery做一些东西。

但同样的事情可以通过课程完成。我理解这个类很多东西（比如说class =“selected”）但是当一个类添加到某个东西时，我可以触发一个jQuery动作，并且该类的内容是ID ...

所以问题是，如果我能用两者完成任何事情，那么使用类和ID的“正确方法”是什么！

Answer 1

何处使用ID与班级

两者之间的简单区别在于，虽然可以在页面上重复使用类，但每页只能使用一次ID。因此，在标记页面上主要内容的div元素上使用ID是合适的，因为只有一个主要内容部分。相反，您必须使用类在表上设置交替的行颜色，因为根据定义它们将被多次使用。

ID是一个非常强大的工具。具有ID的元素可以是以某种方式操纵元素或其内容的JavaScript片段的目标。 ID属性可以用作内部链接的目标，用名称属性替换锚标记。最后，如果您使ID明确且合乎逻辑，它们可以作为文档中的一种“自我文档”。例如，如果块的开头标记具有ID，例如“main”，“header”，“footer”，则不一定需要在块之前添加注释，指出代码块将包含主内容。 “等等。

Answer 2

不同之处在于，ID是文档的唯一内容，因此它应仅用于给定HTML页面上的一个元素。

另一方面，类更像是元素的类别。例如，如果您在单个博客帖子上查看，您通常会在其下方显示对此博客条目的评论，您可以将所有这些评论提供给“评论”类，将单个博客条目提供给ID“条目” 。

Answer 3

HTML ID可能只适用于单个元素，而类可以用于许多，这使它更灵活。

Answer 4

ID唯一标识整个文档中的元素，而类名称类似于“标记” - 可以将许多标记添加到元素中，并且可以重复使用标记。

以下是比较清单：

• 您可以将多个类名添加到以空格分隔的元素，但只能添加一个ID。
• 您可以在多个元素上重复使用类名，但只能在整个文档中使用一次ID。
• ID可以用作URL上的片段标识符，浏览器将滚动到该ID。例如，http://example.com/mypage.htm#someid。使用类不可能这样做。
• ID使得在Javascript中查找特定元素变得非常容易和有效。例如，document.getElementById('someid')（或jQuery中的$("#someid")）。请注意，像jQuery这样的库也可以通过类名来查找元素，但它的效率并不高。

ID的其他属性

• 元素可能包含ID和许多类名，如果ID与其中一个类名相同，则无关紧要或任何意义。
• 框架，iframe和传统弹出窗口计为单独的文档，因此可以在这些不同窗口中的元素上使用相同的ID。
• 某些浏览器没有正确遵循规范，并且允许多次使用相同的ID，并且它在某些方面表现得像类名，但仍然在document.getElementById()中工作。例如，基于该ID的CSS选择器可以匹配多个元素，就像它是一个类一样。这是一个非常混乱的情况，你永远不应该依赖它。如果浏览器停止尝试支持此功能，我会很高兴。