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%;
}

Answer 2

一个。你需要将“span9”改为“.span9”。