为什么h1#chapter1而不仅仅是#chapter1?

时间:2016-07-20 16:42:13

标签: css css3 css-selectors

id属性的值应该是唯一的。在#id_name前面使用带有元素名称的CSS选择器是没有任何意义的,因为没有两个元素无论如何都不能具有相同的id值。 W3C网站暗示两个不同的元素可以具有相同的id,同时在同一个文档中。从理论上讲,h1#chapter1有一个特例,其中有一个不同的元素,其中id = chapter1,但在这种情况下,无论如何都不能在同一文档中使用id = chapter1的h1。例如,两个不同网站上的两个不同文档对不同元素使用相同的ID,两个文档使用相同的样式表。这些特殊情况必须在任何规范中描述,而不是遗漏给猜测。

这段摘录来自 https://www.w3.org/TR/css3-selectors/#id-selectors

以下ID选择器表示一个h1元素,其ID类型属性的值为" chapter1":        H1#第一章

以下ID选择器表示ID类型属性具有值" chapter1"的任何元素:        第1章#

以下选择器表示ID类型属性具有值" z98y"的任何元素。       *#z98y

2 个答案:

答案 0 :(得分:2)

如果您按原样在CSS中定义#chapter1,则该页面上的任何元素都可以使用该选择器。如果将其定义为h1#chapter1,则只有h1元素可以使用该选择器。所以是的,无论如何,每页只能使用一次。但是,事先添加元素名称可以提高代码的特异性。

例如:

h1#chapter1 {
    color: red;
}

只有h1可以使用此ID。因此,如果您团队中的其他人尝试编写此HTML:<p id="chapter1">Some text</p>,则该样式将无法应用。以这种方式编写CSS可以确保只为要设置样式的元素设置样式。

答案 1 :(得分:0)

这只是一个展示如何编写选择器的示例。它还展示了一些额外的特异性。此外,这适用于客户端脚本可能将ID移动到您想要的元素以外的元素的情况,因此作为选择器一部分的元素有助于防止意外的样式应用。