即使我正在覆盖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" />

样式1是一个更通用的文件,包含许多类和属性.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.

Answer 1

你理解这个cascading部分,但也许不是CSS的特殊性规则.第一个规则更具体地选择元素而不是第二个规则,因此选择它.

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

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