Question

我目前正在尝试通过引用div的类来更改标题的颜色。

到目前为止，我已经尝试过：

.pagetitle-title.heading {
  color: purple;
}

<div class="container">
  <h1 class="pagetitle-title heading">IT•ONE Method</h1>
</div>

甚至：

h1 {
  color: purple; 
}

Answer 1

检查CSS的链接“样式表”
打开您的调试控制台并确定您的h2以查看是否针对CSS选项
尝试其他六种颜色代码
在颜色代码后添加“！important”

颜色：紫色！重要；

我看到了您的代码，这是修改此颜色的正确方法，因此...请先尝试我的清单，然后向我们提供您的反馈意见。

Answer 2

正如我的评论所提到的，它看起来像是“ CSS覆盖”的经典案例。避免这种情况的“黑客”之一是使用CSS属性!important告诉浏览器哪个CSS规则特别重要，并且不应被覆盖。

示例：color: purple !important;

CSS以加载样式的方式应用样式。因此，如果您有一个带x规则的CSS文件，以及一个带y规则的第二个CSS文件，并且它们都针对相同的元素，那么最后加载的CSS文件通常会覆盖前一个的样式。

该顺序称为自上而下规则，并且仅由!important属性和 inline CSS覆盖。 !Important属性通常会覆盖所有内嵌 CSS。

鉴于有关自上而下规则的信息，您可以编辑CSS和/或选择CSS加载的顺序，您可以确保自己能够通过将它们作为项目中最后一个包含的文件加载来应用您自己的CSS规则。

示例：

<head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>

如果这3个文件具有适用于相同元素的规则，则 loadedlast.css 文件是将覆盖之前的CSS的CSS，除非!important属性和 inline CSS。通过管理CSS的顺序，您可以避免像使用!important属性那样诉诸“ hacks”。

Answer 3

我会尽量避免添加重要内容。我只会向父母靠前，并尽可能地针对div。相反，我会去

.container h1.pagetitle-title.heading {
    color: purple;
}

如果那只行不通，那我会使用重要的。

根据div类（其中包含空格）在CSS中更改h1颜色

3 个答案: