简单的问题 HTML/CSS 不起作用 [重复]答案

【问题标题】：Simple issue HTML/CSS not working [duplicate]简单的问题 HTML/CSS 不起作用 [重复]
【发布时间】：2019-01-08 07:43:05
【问题描述】：

样式表链接正确。我已经很久没有做过 HTML/CSS 了，但是，这似乎是直截了当的。什么不正确？

.box{
width:100px;
height:100px;
}

.box #1{
border: 1px solid red;
}

.box #2{
border: 1px solid blue;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
The content of the document......
<div class = "box" id = "1"></div>
<div class = "box" id = "2"></div>
</body>
 
</html>

【问题讨论】：

选择器中的空格很重要。
两种方法我都试过了。
ID 不能以数字开头，ID #1 也不在 .box 内
@IlyaBursov 说清楚，ID 不能以 CSS 中的数字开头 (unless they're escaped)，它们在 HTML5 中有效。

标签： html css

【解决方案1】：

您的 css 规则解决了您的 div 中的任何嵌套 id。应该是

.box#1 {...}
.box#2 {...}

【讨论】：

【解决方案2】：

您的边框选择器是嵌套选择器的目标 ID，位于带有类框的元素内。

代替：

.box #1 {your css properties;}

尝试：

#1 {your css properties;}

【讨论】：