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

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 它将起作用

供参考：

W3Schools：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:

An ID-typed attribute of a document language allows authors to assign an identifier to one element instance in the document tree. An ID selector contains a "number sign" (U+0023, #) immediately followed by the ID value, which must be an CSS identifiers. An ID selector represents an element instance that has an identifier that matches the identifier in the ID selector.

CSS 标识符的语法在官方规范中用这些词给出：

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B WF".

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

# fineday {
    color:yellow;
}

感谢评论中的 misorude 指出后一个技巧，并指出 id 和属性选择器之间的特异性规则不同。

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

Internal style does not work in this HTML code?

html

css

styles

internals