Question

我想用div元素将div标签的背景颜色更改为ind类，id为3。这是我的CSS

h1 {
  text-align: center;
}

#identify {
  text-align: center;
}

.container {
  border-style: dotted;
  width: 800px;
  height: 400px;
  position: absolute;
  right: 550px;
}

.ind {
  float: left;
  position: relative;
  top: 40%;
  padding: 50px;
  left: 200px;
}

.ident {
  position: relative;
  display: inline;
  float: left;
  text-align: center;
  padding: 10px;
}

#2.ind {
  background-color: blue;
}

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="project" content="hello">
  <title></title>
</head>

<body>
  <link rel="stylesheet" type="text/css" href="2css.css">
  <h1>Set the distance!</h1>
  <p id="identify">To play this game, you must be at least 18 years old. You must also fill out some information.</p>
  <div class="container">
    <div class="ind" id="2">2</div>
    <div class="ind" id="3">3</div>
    <div class="ind" id="4">4</div>
  </div>
</body>

</html>

在浏览器中，由于某种原因，ID为2的div类ind的背景颜色不会变为蓝色。有什么建议吗？

Answer 1

尽管有许多其他说法，HTML5中的ID确实可以以数字开头。但是，在其他情况下引用这些元素时必须小心。首先输入一些代码：

console.log(document.querySelector('#\\0032') == null);

#\0032 { background-color: black; color: white }
[id="2"] { background-color: white; color: black }

<p id="2">
Two
</p>

您确实需要使用Unicode转义序列转义数字（我已经将其扩展为四位十六进制表示形式，这很清楚）。您可以使用属性选择器，但是会将其specificity (see this question's answers for more information on that topic)更改为低于ID。您会看到第二个选择器不够具体，无法覆盖ID选择器。不一定是坏事，但一定要注意。

请注意，尽管它可以工作，并且在相关规范的允许下，但由于需要在CSS中转义，因此人们通常对此表示反对。请注意，这也意味着在类似DOM方法querySelector的情况下，当使用JavaScript访问时，转义字符也必须转义（因为必须使用JavaScript字符串，该字符串使用相同的转义字符）。我也在代码段中添加了一个示例。

Answer 2

CSS ID不能仅包含数字。

两种解决方案：

1-以字母数字形式更改您的ID，即id =“ div2”

2-将data属性用作data-id =“ 2”，然后在CSS中使用

 #\32 {
  background-color: blue;
}

Answer 3

如果要在CSS中访问它，则ID不能以编号开头，因此＃2 无效。

如果您仍要使用id =“ 2”，请尝试：

 protected override void OnModelCreating(ModelBuilder modelBuilder)
 {
      base.OnModelCreating(modelBuilder);

      modelBuilder.Entity<AVUser>().HasOne(a => a.SelectedToy).WithOne();
      modelBuilder.Entity<AVUser>().HasMany(a => a.Toys).WithOne(t => t.AVUser).HasForeignKey(t => t.UserId);
 }

Answer 4

要将CSS效果赋予div元素id = 3，您可以按以下步骤进行操作。

.container > .ind[id="3"]
{
  background-color:lightblue;
}

<div class="container">
    <div class="ind" id="2">2</div>
    <div class="ind" id="3">3</div>
    <div class="ind" id="4">4</div>
</div>

如何更改div标签中的div标签集的css

4 个答案: