Html 这个CSS是从哪里来的？

我正在尝试使用此模板探索CSS3

在主页上，您会看到一个调用action DIV的命令，如下所示

<div class="call-to-action">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h3>We are Truehost. The most trusted and dedicated <span class="id-color">hosting</span> provider.</h3>
            </div>
            <div class="col-md-3">
                <a class="btn btn-extra-large btn-primary" href="#">Get This Now!</a>
            </div>
        </div>
    </div>
</div>

我们是真正的主人。最值得信赖和最专注的托管提供商。

我试图理解id颜色是如何从green.css中提取颜色的。该模板有很多基于颜色的css文件，但主页仅从green.css中提取id颜色，并以绿色显示文本宿主（

#1a8b49

）

有人能解释一下这是如何工作的吗？

在

main的标题中。css

被引用：

<link rel="stylesheet" href="css/main.css" type="text/css" id="main-css">

---

当浏览器决定哪个CSS定义优先时，有两个标准需要考虑

第一个是CSS定义的加载顺序。如果所有其他因素都相等，则应用HTML页面上最后加载的CSS定义

第二个标准是用于定义CSS属性的选择器的特殊性。假设您有一个名为

#container

的元素，它显示在名为

#outer container

的元素中，如下所示：

<div id="outer-container">
    <div id="container">
         Some Text
    </div>
</div>

但是，如果在上述定义之前加载的定义以以下内容为目标，则该定义可以优先：

#outer-container #container{
    background-color: blue;
}

这是因为第二个CSS定义的定义更具体，说明更透彻

---

总之，大多数情况下，最后加载的CSS定义是实现的。如果您看到与此行为的偏差，很可能是因为另一个定义更具体地针对您正在查看的元素

您是否尝试查看浏览器中的DevTools以查看从何处接收CSS规则？：）或者更确切地说，您是在询问CSS优先级规则吗？（）

green.css

是最后加载的，因此它使用该文件的定义。我把它改成了red.css，它也相应地工作了：）所以那些彩色css文件是为了快速参考，所以我们不必把所有出现的绿色都改成红色。伟大的

#container{
    background-color: pink;
}

#outer-container #container{
    background-color: blue;
}