身体标签上的类别或 ID

Posted

技术标签:

【中文标题】身体标签上的类别或 ID【英文标题】:Class or ID on Body Tag 【发布时间】:2011-04-24 14:00:33 【问题描述】:

我最近一直在为我的 html 文档的正文标签应用 ID to allow greater CSS control (#9)。最近我突然想到,我可以通过将一个类应用于body标签来做同样的事情。我想知道每个选择的正面和负面。如果我有多个页面的body标签具有相同的ID,使用一个类会更好吗?你怎么看?为什么?

更新:类/ID 基本上是我打算用来向样式表标识样式表应用于哪个页面或页面类型的内容。例如,它是主页、联系页面、众多搜索结果页面之一、存档页面等吗?

【问题讨论】:

【参考方案1】:

在 HTML5 中,id 属性可以在任何 HTML 元素上使用(它将在任何 HTML 元素上验证。但是,它不一定有用)。

在 HTML 4.01 中,id 属性不能用于:<base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

注意:HTML 4.01 对 id 值的内容有更大的限制(例如;在 HTML 4.01 中,id 值不能以数字开头)。

来源:W3School

【讨论】:

【参考方案2】:

使用类是完全可以接受的,可能比使用 id 更可接受。应尽可能限制 id 的使用,因为它们可能会与其他 id 冲突并破坏 document.getElementById 之类的内容。

id 选择器比类选择器更具体,这通常使其成为您用例的更好选择。 -- 大卫·多沃德

但是,高“特异性”并不总是可取的。考虑主样式表中的body#faq #col_b a color:gray;,然后有人开发了一个灰色背景的插件,出现在常见问题页面上,现在他们需要使用!important 或创建另一个id 属性以提供更高的特异性。

另外,考虑在单个主体元素中使用多个类:

<body class="faq two_column big_footer"> ...

【讨论】:

在这种情况下,很可能会发生有人开发样式可能会崩溃的插件的示例。对我来说,似乎如果有人编写了规则 body#faq #col_b a color:gray;,那么您可能必须应用 ID/类来获得更高的特异性是正确的。但是,如果您有 body.faq #col_b a color:gray; 在我看来,还必须应用 ID/类才能获得更高的特异性。你能解释一下这两种情况有什么区别吗? 没有太大区别,真的......我个人不会使用 col_b 的 id(比如说,对于页面布局中的右侧列),我会使用一个类。在body#faq .col_b abody.faq .col_b a 之间,第二个应该更容易被其他人覆盖。总的来说,我认为如果您正在创建其他人可以构建的 CSS,那么高特异性(如果这就是所谓的)是一件坏事,而较低的特异性可以实现相同的目标。 很好的推理。如果其他人在您的 CSS 上进行构建,请始终使用必要的最低特异性来获得所需的结果。【参考方案3】:

id 选择器比类选择器更像specific,这通常使它成为您用例的更好选择。

【讨论】:

【参考方案4】:

你可以(阅读:应该)只使用body标签上的id。

ID = 每页单次使用

类 = 多种用途

1 个正文标签 = 1 个 ID 标签。这在不同的页面上可以是相同的。从本质上讲,为此目的使用类标签可能是多余的。

【讨论】:

【参考方案5】:

如果您打算在页面中重用样式,最好使用类。如果样式表是为特定页面设计的,则 ID 非常有用。但仍然取决于您的应用程序。

【讨论】:

【参考方案6】:

每个页面的 ID 必须是唯一的(如果您想要有效的标记),这意味着一个页面上应该只存在一个特定 ID 的实例。

另一方面,类可以应用于每页的许多元素。对重用相同样式的事物使用类,对需要自己样式的更独特的元素使用 ID。

理想情况下,尽可能使用类并限制 ID 的使用。

有关 ID 的详细信息,请参阅here,有关课程的更多信息,请参阅here。

【讨论】:

谢谢。我已经阅读了 w3schools。在我的情况下,我可以使用类或 ID,这是可以接受的。但是,我正在尝试集思广益,讨论使用其中一个的任何可能的积极/消极因素。 在这种情况下,只要您使用它们的目的在语义上是正确的,就不会产生任何重大影响。 请不要链接到 W3Schools - they're frequently inaccurate and not affiliated with the W3C。

以上是关于身体标签上的类别或 ID的主要内容,如果未能解决你的问题,请参考以下文章

按产品类别列出的产品标签 - 标签不可点击或链接

php 向媒体附件添加类别或标签(图像,视频等)

使用 slug 而不是 ID 获取记录

将主题标签分类为主题或类别。例如:#FIFA -> SPORTS , VIDEO_GAMES

如何根据 ggplot2 绘制的图上的 y 轴值覆盖构面标签?

AmCharts V4:使类别轴中的每个标签都可点击,并为每个标签提供不同的功能