嵌套标签CSS样式不生效咨询：样式无法应用于指定HTML元素

嘿，我一眼就瞅出问题所在啦——你的CSS选择器写法出了错！

你当前写的选择器：

.carousel-content>div> h2,h3,h4{ color: #ffffff; line-height: 145%; font-family: 'Lato', sans-serif; }

会被浏览器解析成三个完全独立的选择器：

1. .carousel-content>div> h2（这个确实能选中目标h2）
2. h3（作用于页面所有h3，不是.carousel-content>div下的那个）
3. h4（作用于页面所有h4）

这就导致你目标里的h3根本没被这个样式规则选中，自然不会生效啦。

给你两个靠谱的修正方案：

方案一：修正分组选择器格式 #

给每个标签选择器都加上父级限定，确保它们都指向.carousel-content>div下的元素：

.carousel-content>div>h2,
.carousel-content>div>h3,
.carousel-content>div>h4 {
  color: #ffffff;
  line-height: 145%;
  font-family: 'Lato', sans-serif;
}

方案二：利用统一类名简化代码 #

注意到你的h2和h3都有.contents类，直接用这个类做选择器会更简洁，还不容易出错：

.carousel-content .contents {
  color: #ffffff;
  line-height: 145%;
  font-family: 'Lato', sans-serif;
}

另外再给你几个排查小技巧：

• 打开浏览器开发者工具（按F12），选中目标h2/h3元素，查看「样式」面板，如果你的规则被划掉，说明被更高优先级的样式覆盖了，这时候可以给选择器加类名提升优先级，比如.carousel-content>div>h2.contents
• 确认Lato字体是否已经正确引入到页面中（如果字体没加载，会显示默认字体，但颜色和行高应该还是能生效的）
• 检查你的CSS文件是否正确引入，有没有路径错误，或者是不是写在其他样式之后被覆盖了

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