Question

<html>
<head>
<style>
#1fineday {
    color:yellow;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<div class="intro">
  <p id="1fineday">Hello World</p> 
</div>
</body>
</html>

"Hello World"不会是黄色的吗？我不明白为什么我写的内部CSS样式不适用。 ID是1fineday。我一定在俯视什么。

Answer 1

由于命名约定，您的id不能以数字开头

<html>

<head>
  <style>
    #fineday {
      color: yellow;
    }
  </style>
</head>

<body>
  <h1>Welcome</h1>
  <div class="intro">
    <p id="fineday">Hello World</p>
  </div>
</body>

</html>

删除数字1即可使用

供参考：

W3学校：https://www.w3schools.com/css/css_syntax.asp

CSS技巧：https://css-tricks.com/ids-cannot-start-with-a-number/

Answer 2

使用#字符编写CSS选择器的方式有些特殊。您可以随时编写选择器以使用属性选择器

[id="1fineday"] {
    color:yellow;
}

，您会看到黄色文字。

您不能在选择器中写#1fineday，因为as the official CSS Selector Specification says：

文档语言的ID类型属性允许作者为文档树中的一个元素实例分配标识符。 ID选择器包含一个“数字符号”（U + 0023，＃），其后紧跟ID值，该ID值必须是CSS标识符。 ID选择器表示具有与ID选择器中的标识符匹配的标识符的元素实例。

CSS标识符的语法在官方规范中用以下单词给出：

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，以及连字符（ -和下划线（_）；它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“ B＆W？”可以写为“ B \＆W \？”或“ B \ 26 W \ 3F”。

因此，如果您仍然想使用#，则必须对数字1使用转义码：

#\31 fineday {
    color:yellow;
}

感谢注释中的误解，指出了后者的技巧，并指出id和属性选择器之间的特异性规则是不同的。

内部样式在此HTML代码中不起作用？

2 个答案: