Question

我正在尝试使用此模板http://www.themenesia.com/themeforest/truehost/

来探索CSS3

在首页上，您会看到一个号召性用语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-color是如何从green.css中获取颜色的。该模板有很多这种基于颜色的css文件，但主页只从green.css中获取id-color和显示以绿色托管的文字（#1a8b49）。

有人可以解释一下这是怎么回事吗？

Answer 1

当浏览器决定哪个CSS定义优先时，会有两个标准。

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

第二个标准是用于定义CSS属性的选择器的特殊性。假设您有一个名为#container的元素，该元素显示在名为#outer-container的元素中，如：

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

要加载的最后一个CSS定义可能是

#container{
    background-color: pink;
}

但是，如果使用以下内容定位元素，那么在上述之前加载的定义可能优先：

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

这是因为第二个CSS定义更具体，定义更全面。

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

Answer 2

<{3>}标题中的

引用了main.css：

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

在第41行，你有：

@import url("colors/green.css");

这个CSS从哪里开始？

2 个答案: