CSS选择器疑问：.subtitle与h2[class=subtitle]的区别及适用场景

嘿，这个问题问得特别好——刚入门CSS的时候，很容易搞混类选择器和属性选择器的用法，我来给你掰扯清楚两者的核心差异和各自的适用场景！

先搞懂两者的核心区别 #

首先，这两个选择器的生效逻辑完全不一样：

• .subtitle是类选择器：它会选中所有带有subtitle类的元素，不管这个元素是<h2>、<p>还是<div>，哪怕元素同时还有其他类名（比如class="subtitle active"），它也会被选中。
• h2[class=subtitle]是属性选择器（精确匹配）：它只会选中两个条件同时满足的元素：① 标签是<h2>；② class属性的值精确等于subtitle——注意这里是“精确等于”，如果<h2>的class是subtitle other，这个选择器就不会选中它！

举个例子看差异：

.subtitle { color: red; }
h2[class=subtitle] { font-size: 20px; }

<h2 class="subtitle">About Me</h2> <!-- 会变红+字体20px -->
<h2 class="subtitle active">Services</h2> <!-- 会变红，但不会有20px字体（因为class不是精确等于subtitle） -->
<p class="subtitle">Contact Us</p> <!-- 会变红，但不会有20px字体（因为不是h2标签） -->

各自的适用场景 #

优先用.subtitle的场景 #

• 通用样式复用：当你希望多个不同标签的元素共享同一样式时，比如你想让页面里的<h2>、<p>甚至<span>都用上subtitle的样式，类选择器是最高效的选择，不用重复写多个标签+类的组合。
• 工具类/通用类：像text-center、mb-3这类用来控制布局、文本对齐的通用工具类，必须用类选择器，因为它们要适配各种HTML标签。
• 不限制元素标签和额外类名：只要元素带有这个类就生效，不管它是什么标签、有没有其他类，类选择器都是最优解。

适合用h2[class=subtitle]的场景 #

• 精确匹配class属性：当你明确要求元素的class只能是subtitle，不能有任何额外类名时——这种场景比较少见，但如果有严格的样式隔离需求（比如防止其他类干扰当前样式），就可以用它。
• 仅针对特定标签的纯class元素：假设你的页面里subtitle类用在<h2>和<p>上，但你只想给**只带subtitle类的<h2>**加特殊样式，不想影响带subtitle的<p>，也不想影响带subtitle+其他类的<h2>，这时候这个属性选择器就刚好合适。
• 扩展属性选择器的灵活用法：虽然你问的是精确匹配，但属性选择器还有很多变种，比如h2[class*=subtitle]（class包含subtitle）、h2[class^=subtitle]（class以subtitle开头），这些在需要模糊匹配class属性时会很有用，而精确匹配是这些用法的基础。

回到你最开始的疑问：在你给出的示例里，三个<h2>都是纯subtitle类，这时候两个选择器效果完全一样，用.subtitle确实更简洁。但当你遇到上面说的特殊场景时，h2[class=subtitle]这种属性选择器就能发挥独特的作用啦！

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