CSS:class和id是否可以互换?

时间:2009-03-23 01:13:11

标签: css class

我知道其他人已经询问过如何在CSS文件中使用class和id,例如

Div: Class vs Id

所以我知道class和id之间的语义和语法差异:id应该用于只使用一次的元素,而class应该用于共享属性的元素。

但这不是一个严厉的规则,是吗?将id用于多个元素有什么危害?或者只使用一个班级?毕竟,不是“一个元素”只是一个集合(类)中只有一个东西吗?

如果违反规则,浏览器的CSS解释器会抛出错误吗?我没见过它。

那么为什么我们同时拥有id和class?为什么不只是一个或另一个并称之为好?

7 个答案:

答案 0 :(得分:11)

不允许重复ID;虽然你的浏览器可能会或可能不关心,但这个概念毫无意义 - 如果有重复,它怎么能成为一个ID呢? ; - )

答案 1 :(得分:5)

如果你这样做,CSS不会抱怨,但如果你想通过id获取一个元素,Javascript肯定会。

真正的答案是,一个且仅一个对象的标识符与可应用于多个对象的标识符之间存在语义差异。虽然你可以违反规则,但最好不要这样做。

两者之间还有另外一个区别,(X)HTML元素允许像这样应用多个类:

<div class="foo bar"></div>

你无法用ids做到这一点。

答案 2 :(得分:4)

回答“为什么我们同时使用CSS的类和ID,当你被允许拥有一个类的单个实例?”时,请以这种方式看待它。

我们需要CSS的ID。我们可以只使用单个类实例。

但我们需要JavaScript的ID。那么,为什么不在CSS中使用它们呢?

想象一下这里有ID的世界,但只用于JavaScript。

你必须这样编码:

<div id="wrapper" class="wrapper">
    <div id="nav" class="nav">

    </div>
</div>

等等。

答案 3 :(得分:2)

CSS不是问题(你只是在那里定义样式),而是文档的有效性。

id意味着唯一标识元素(出于任何目的使用它),所以当你有两个具有相同ID的元素时,不会有好事。

请记住,“id”属性并不是专门针对CSS样式(至少不是类),而是针对其他事情 - 特别是JavaScript!

我不会使用“document.getElementById()”如果我不知道我将得到什么回报......

答案 4 :(得分:2)

如果您在给定的课程中只有一个元素,那么您不会受到任何伤害。在这种情况下,区别仅在于语义,因为您所做的只是模拟id。但是,如果您有多个具有相同ID的元素,则会遇到页面验证, CSS定位以及对该ID的Javascript引用的问题。最好按照预期使用id和class属性,以便在页面样式中获得最大的灵活性。请记住,您可以拥有一个具有唯一ID 的元素,使其同时属于一个或多个类。

答案 5 :(得分:1)

关于它,有很多事情要说。你已经知道了一个类的语义含义,所以我只谈一个案例 - 排除javascript - 何时使用id会产生差异:你可以引用带有id的元素来导航页面内的锚点或外部链接:如果要直接转到id =“news”的元素,可以将html文档的特定元素与<a href="http://www.site.com/home.html#news>链接。显然,您不能使用类,因为类不是唯一的。因此,出于这个原因和其他原因,拥有一个标识文档中元素的属性非常重要。

答案 6 :(得分:0)

ID对于您知道每个页面都是唯一的元素非常有用。

例如:

  • 菜单(#menu)
  • 您将放置主要内容的中心列(#content)
  • 放置外部链接的右栏(#external-links)

您可能需要针对这些元素的非常具体的规则(精确,非相对宽度和位置)。

现在,每个元素都包含某种类型对象的几个实例:

  • 菜单将包含.menu-items

  • central将包含.articles

  • external-links将包含.external-link

这个子元素不是唯一的,但它们的布局属性是......因此使用了类。

这些子元素中的每一个都可能有子类(如.featured-article),甚至可能有一些ID(#current-menu-item)。

当然,你总是可以在ID中使用类,但我认为使用ID可以清楚地说明哪些元素是唯一的,哪些元素不是。除此之外,我更喜欢在我的类属性中使用空格分隔较少的名称,以使它们具有合理的可读性。