如何为div容器内的多个h3元素单独应用CSS样式 无需逐个加类名

直接利用CSS后代选择器做层级匹配即可，全程不用改现有HTML结构，不用给每个h3重复加类，既不会把样式绑到div容器上，也不会影响全局h3的默认规则。

具体修改内容 #

只需要调整CSS的选择器指向，把原本给.menu类设置的红色背景，绑定到.menu容器内部的h3元素上，代码如下：

/* 保持原有全局h3的默认显示规则，不影响其他场景的h3样式 */
h3 {
  display: inline;
}
/* 关键修改：选中.menu容器内的所有h3，给这些h3单独设置红色背景 */
.menu h3 {
  background-color: red;
}

效果说明 #

修改完成后，最终表现和你预期的「每个h3单独加menu类」完全一致：

• 红色背景只加在每个h3元素上，.menu容器本身不会被设置背景色
• 页面其他位置的h3完全不受规则影响，后续其他场景的h3可以自由设置独立样式
• 不需要给每个h3逐个补类名，HTML结构保持简洁，没有冗余代码
• 原有h3的行内显示规则保留，多个h3会横向排列，每个h3自身带红色背景，和目标效果无偏差

补充：如果后续需要给.menu容器本身设置间距、对齐方式等布局属性，可以单独保留.menu的选择器写对应规则，只需要把之前错放在容器类上的背景属性移到子元素选择器里即可，不需要改动HTML结构。

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