CSS选择器问题：#acts h3,p选中了目标div外的元素

你遇到的问题是CSS分组选择器的语法规则导致的：

• 逗号在CSS里是「选择器分组」的分隔符，每个逗号前后都是独立完整的选择器。
• 你写的#acts h3, p，实际是两个独立选择器的组合：
  1. #acts h3：选中#acts内部的所有<h3>标签（这部分是对的）
  2. p：选中页面上所有<p>标签（包括#acts外部的，这就是问题所在）

而分开写#acts h3和#acts p时，每个选择器都明确限定了「#acts内部」的范围，所以只会选中目标元素。

解决方法很简单，把每个选择器都加上#acts前缀，写成：

#acts h3, #acts p {
  /* 你的样式代码 */
}

这样两个选择器都限定在#acts内部，和分开写的效果完全一致，同时保持了分组写法的简洁性。

举个直观的HTML例子：

<div id="acts">
  <h3>我是内部h3</h3>
  <p>我是内部p</p>
</div>
<h3>我是外部h3</h3>
<p>我是外部p</p>

• 用#acts h3, p会选中：内部h3、内部p、外部p
• 用#acts h3, #acts p会选中：内部h3、内部p

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