CSS 影响错误部分中的元素

Question

我在这个网站上工作了一段时间，我运行遇到了一些问题，但其中很多只是小问题。

现在我就是想不通这是怎么回事。

如果您查看上面写着 "Start Growing Your Business Today" 的文字，您会发现它有一些填充。

现在如果你用元素检查器查看，你可以看到样式来自这个 CSS

.home #pricing h1, h2, h3 {

    padding: 1em;

}

但问题是，header 不在#pricing 部分。所以我不明白为什么要设计它。

我尝试了一些方法，例如

 #pricing h1, h2, h3 {

    padding: 1em;

}

或

.pricing h1, h2, h3 {

    padding: 1em;

}

但似乎没有任何效果。我什至试过查看我是否在文档流中搞砸了，但我找不到任何问题。

如有任何帮助，我们将不胜感激。

Answer 1

#pricing h1, #pricing h2, #pricing h3 {
    padding: 1em;
}

这应该可以解决问题。用逗号分隔类名时，请确保指定所有子类/父类。

元素因此被设置了样式，因为在第一个逗号之后您只指定了 h2 和 h3，因此它设置了 DOM 中所有外观的样式。

Answer 2

您得到这种不需要的样式是因为您没有使用正确的语法为同一元素中的多个项目设置样式。

这将产生您想要实现的目标：

#pricing .home h1, 
#pricing .home h2, 
#pricing .home h3{

    padding: 1em;

}

按照您的方式，您在 id = "pricing" 元素中设置 h1 样式，然后在整个文档中设置 h2 和 h3 样式。

CSS affects element in wrong section