CSS中h1{}与h1,h1{}的差异及样式优先级、hover失效问题咨询

嘿，让我一步步帮你拆解这几个CSS疑问：

1. 为什么pink和green样式总是生效？ #

这是CSS**层叠性（Cascade）和权重（Specificity）**共同作用的结果：

• 你写的h1 {color:red;}和h1, h1 {color:pink;}，这两个选择器的权重完全相同（都是元素选择器，权重值为1）。在权重一致的情况下，CSS会采用后面的规则覆盖前面的规则，所以color:pink会替换掉之前的color:red。
• 同理，p {color:blue;}和p, p {color:green;}也是一样的逻辑：两个选择器权重相同，后面的color:green覆盖了前面的color:blue。

2. a:hover不生效的原因 #

你的代码里有两个最可能的问题：

• 伪类顺序与标签有效性：CSS超链接伪类有严格的生效顺序要求，正确顺序是 a:link → a:visited → a:hover → a:active（简称LVHA）。你的代码里a:hover虽然在a:visited之后，但如果你的<a>标签没有设置href属性，它就不是有效的超链接，:visited和:hover伪类可能无法正常触发（不同浏览器对无href的a标签伪类支持有差异）。
• 权重被覆盖：检查一下有没有其他更高权重的样式（比如带ID或类的选择器）覆盖了a:hover的规则，如果有的话，你需要提升a:hover的权重（比如写成a:visited:hover或者给a标签加类名）。

3. h1{} 与 h1,h1{} 在CSS中的差异 #

简单来说：完全没有功能上的差异！

• h1,h1是选择器列表里重复了同一个选择器，浏览器在解析时会忽略重复的部分，最终效果和单独写h1{}完全一致。
• 很多人误以为重复选择器会叠加权重，但其实CSS权重是按选择器的类型（元素、类、ID、伪类等）计算的，和重复次数无关。所以h1,h1{}的权重和h1{}一模一样，不会因为多写了一个h1就变得更优先。唯一的区别就是代码多了几个字符，对渲染没有任何影响。

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