Question

首先，这是代码的相关部分：

<head>
<style type="text/css">
#part1 {
    background: url("1.jpg") no-repeat center;
    background-size: cover;
}
#1-title {
    color: blue;
}
</style>
</head>

<body>
<div class="jumbotron jumbotron-fluid" id="part1">
    <div class="container">
        <h1 id="1-title" class="display-3">The New App</h1>
        <p class="lead" id="1-disc">A new app</p>
        <hr class="my-4">
    </div>
</div>
</body>

h1被分配了＆＃34; 1-title＆＃34;的ID，因此h1文字颜色应为蓝色，但即使我使用!important，它也会保持黑色

但是，我尝试添加一个类并将样式应用于它，如下所示：

<style type="text/css">
#part1 {
    background: url("1.jpg") no-repeat center;
    background-size: cover;
}
.c {
    color: blue;
}
</style>

和

<h1 class="display-3 c">The New App</h1>

它有效。

那是什么原因？为什么我不能使用d选择器更改颜色？

Answer 1

ID选择器无法正常工作，因为ID无法以数字开头。将ID更改为字母或使用属性选择器[id='1-title'] {...}

Answer 2

这是因为id或类名不能以数字开头。

Answer 3

从HTML5开始，对ID值的唯一限制是：

在文档中必须是唯一的不得包含任何空格字符必须包含至少一个字符类似的规则适用于类（当然，除了唯一性之外）。

因此值可以是所有数字，只有一位数，只是标点字符，包括特殊字符，等等。只是没有空格。这与HTML4非常不同。

在HTML 4中，ID值必须以字母开头，然后只能用字母，数字，连字符，下划线，冒号和句点来跟踪。

在HTML5中，这些是有效的：

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

请记住，在ID的值中使用数字，标点符号或特殊字符可能会在其他上下文中引起麻烦（例如，CSS，JavaScript，正则表达式）。

Answer 4

所有的答案都是正确的，但我正在为那些必须以一个数字开头的人写这个答案。这可以通过两种方式完成---

no.1

您可以使用Michael Coker的答案 -

[id='1-title'] {...}

2号

但是为此支持到IE7所以如果你是那些需要支持旧IE的不幸者，你需要使用这样的unicodes -

#\31-title {...}

希望这有助于未来的读者！

Answer 5

这是因为id选择器不能以数字开头。请阅读为HTML标记创建ID的规则。

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（＆＃34; - ＆＃34;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

请参阅以下链接以获取更多信息。

Why can't I have a numeric value as the ID of an element?

无法使用id选择器更改Bootstrap h1文本颜色？

5 个答案: