如何为页面各section分区定义专属CSS样式

你当前写法不生效的核心原因是CSS选择器匹配逻辑错误：h2#section-a的语义是选中id为section-a的h2标签，但你的代码里id="section-a"是挂在外层div上的，h2和p标签本身没有这个id，选择器根本匹配不到目标元素，自然不会生效。

使用CSS后代选择器即可实现需求，不需要给内部单个元素加id/class，完全符合代码整洁的要求：只需要先写外层分区容器的选择器，加空格后再接内部要控制的元素选择器，就能精准命中对应分区内的目标标签。

修正后的完整CSS代码如下，原有HTML结构不需要做任何改动：

/* 全局基础样式保持不变 */
h2 {
  font-family: 'Wellfleet', cursive;
}

p {
  font-family: 'Roboto Mono', monospace;
}

/* section-a分区专属样式 */
#section-a h2 {
  color: red;
}
#section-a p {
  color: black;
}

/* section-b分区专属样式 */
#section-b h2 {
  color: blue;
}
#section-b p {
  color: white;
}

对应的原有HTML结构可直接复用：

<div id="section-a">
  <h2>LOREM</h2>
  <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> consequat.</p>
</div>

<div id="section-b">
  <h2>LOREM</h2>
  <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> consequat.</p>
</div>

• 后代选择器的匹配逻辑是：只要元素是外层指定容器的后代节点（不管嵌套多少层），都会被命中，后续如果分区内新增其他标签（比如ul、li），也可以用同样的写法加专属样式，不需要给新标签加额外属性
• 如果需要只匹配容器的直接子元素，可以把空格换成>，也就是子代选择器，比如#section-a > h2只会匹配直接挂在section-a下的一级h2，不会匹配更深层嵌套的h2，可根据实际需求选用

内容的提问来源于stack exchange，提问作者42piratas