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

【问题标题】：Can't change Bootstrap h1 text colour using id selector?无法使用 id 选择器更改 Bootstrap h1 文本颜色？
【发布时间】：2017-07-16 03:12:29
【问题描述】：

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

<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 的 id 为“1-title”，因此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 选择器更改颜色？

【问题讨论】：

查看link

标签： html css twitter-bootstrap

【解决方案1】：

ID 选择器不起作用，因为 ID 不能以数字开头。要么将 ID 更改为字母，要么使用属性选择器[id='1-title'] {...}

【讨论】：

【解决方案2】：

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

1号

您可以使用 Michael Coker 的答案--

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

2号

但是对于这个支持直到IE7所以如果你是那些需要支持旧IE的不幸的人，你需要使用像这样的unicodes--

#\31-title {...}

希望这对未来的读者有所帮助！

【讨论】：

【解决方案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、正则表达式）中引起问题。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，并且可以是后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线（“_”）、冒号（“:”）和句点（“.”）。

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

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

【讨论】：