javascript - 类型选择器是否应该被 id 选择器覆盖

Question

我是 Web 编程新手，我正在尝试使用 CSS 样式和 HTML 向不同的 div 容器添加不同的样式。我复制了一个名为“box-1”的现有 id 选择器，并创建了一个名为“box-2”的新选择器，具有不同的颜色（红色）和背景颜色（黄色）。当我将此样式应用于新 div 时，段落颜色与 id 选择器中定义的颜色不匹配，而是使用了我之前添加的段落类型选择器中的颜色（蓝色）。“box-1”段落颜色也不对。

.box {
  border: 1px solid black;
  min-height: 250px;
}


/*I think this is overriding the id selector*/

p {
  color: blue;
}


/* This is a style I want to apply*/

#box-1 {
  background-color: black;
  color: white;
}


/* This is a style I want to apply*/

#box-2 {
  color: red;
  background-color: yellow;
}

@media (max-width: 500px) {
  p {
    color: red
  }
}

<div style="border: 1px solid black">
  <h1>Hello!</h1>
</div>
<div class="box">
  <p>Blah blah</p>
  <p>Blah blah</p>
  <h2>Sub section</h2>
</div>
<div class="box" id="box-1">
  <p>Blah blah</p>
  <p>Blah blah</p>
  <h2>Sub section</h2>
</div>
<div class="box" id="box-2">
  <p>Blah blah</p>
  <p>Blah blah</p>
  <h2>Sub section</h2>
</div>

输出：

我研究了 css 的特异性，从我所能收集到的所有信息中，id 选择器应该覆盖类型选择器，所以我不确定问题是什么。有谁知道这里的错误是什么？

标签： javascripthtmlcss