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


<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 样式不适用。ID1fineday.我一定忽略了什么。

由于命名约定,您的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/

使用#字符编写 CSS 选择器的方式存在技术性。您始终可以编写选择器以使用属性选择器

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

你会看到黄色的文字。

你不能在选择器中写#1fineday,因为,正如官方的CSS选择器规范所说:

文档语言的 ID 类型属性允许作者将标识符分配给文档树中的一个元素实例。ID 选择器包含一个"数字符号"(U+0023,#(,紧跟 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 和属性选择器之间的特异性规则不同。

最新更新