css - 即使我正在覆盖 CSS 类，但仍使用旧的宽度值

Question

我有两个 CSS 文件，为了简单起见，我们称它们为 style1.css 和 style2.css。

我按以下顺序包括它们：

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />

样式一是具有许多类和属性的更通用的文件。Style2 会覆盖这些。

例如，style1 有这个：

.row-fluid > .span9 {
width: 74.358974359%;
}

而 style2 具有：

.span9{
  width:50%;
}

我有一些包含 .span9 元素的 .row-fluid DIV，并且第一个样式用于它们，即使如果发现重复的选择器，浏览器应该只接受最后一个 CSS 规则。

我通过 Chrome 开发人员工具发现了这一点，我看到来自 style9 的 span9 定义被交叉，而来自 style1 的定义位于顶部并被使用。

PS：具体来说，style1 是 Twitter Bootstrap CSS，style2 是我自己从头开始的 CSS。

score 8 · Accepted Answer

您正在理解这cascading部分，但可能不是 CSS 的特异性规则。第一条规则比第二条规则更具体地选择元素，因此选择它。

尝试将第二条规则更改为：

.row-fluid > .span9 {
    width: 50%;
}

score 1 · Accepted Answer

A. 您需要将“span9”更改为“.span9”。

2 回答 2