html - 为一个 html/php 页面使用两个外部 css 文件

Question

对于我的网站，我想使用两个 css 文件，一个是 Twitter Bootstrap (bootstrap.css)，另一个是我自己的 (erikstyle.css)。这样做的原因是，在大多数情况下，我想使用 Bootstrap 样式，但我希望在不更改原始文件的情况下自由地对样式进行微小的更改。

因此，示例页面具有以下内容:

<link rel="stylesheet" type="text/css" href="../styrkesite/Bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../styrkesite/css/erikStyle.css"/>

我正在使用来自 bootstrap.css 的样式“kbd”

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  etc.
}

我已经像这样改变了 erikstyles.css 中的颜色:

kbd
{
  color: red;
}

问题是，erikstyle.css 样式更改(即颜色)没有生效。但是，如果我将 erikstyle.css 更改为

   kbd
    {
     color: red !important;
    }

它有效。所以，我知道这两个文件都被正确引用并且按预期工作，但我想避免为每个更改添加 !important ...

就 Google 而言，页面上 css 文件引用的顺序确保在出现任何样式元素冲突(在本例中为颜色)时，最后引用的 css 文件中的样式元素优先(即应该使用 erikstyle 的颜色，其余元素应该从 bootstrap 中获取)

我试过添加

title="persistent"

和

title="preferred"

引用其他地方的 css 文件引用，但没有效果。

有人对此有任何线索吗？

谢谢 :)

Answer 1

让你的选择器更强大例如给它一个完整的路径喜欢

.someClass div kbd {
    color: red;
}

或类似的东西:

kbd.someClass {
    color: red;
}

或

kbd#someId {
    color: red;
}

更新:

在您的情况下，您的 HTML 应如下所示:

<kbd class="someClass" id="someId"></kbd>

使用类或id

我还强烈建议您阅读更多有关 HTML 和 CSS 的内容

w3schools 将是一个好的开始:

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp