Question

此链接可以查看问题。 http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForward.html

这三个盒子需要有绿色背景，但另一种风格优先。我认为样式应该优先于它们在样式表中出现的位置，样式表中的样式比样式表中更高的样式级联（优先级）更低。我猜这是错误的，因为这些框的背景颜色的样式表在这里：

    #maincontent .col {
    background: #ccc;
    background: rgba(204, 204, 204, 0.85);

}

#callout1   {
    background-color: #00B300;
    text-align:center;
}
#callout2   {
    background-color: #00CC00;
    text-align:center;
}
#callout3   {
    background-color: #00E600;
    text-align:center;
}

当删除“#maincontent .col”的样式时，绿色显示（链接）http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForwardGreen.html，但我认为绿色应该显示，因为它是在指定的灰色颜色更高之后。

我正在寻找一种方法来获得我需要的东西，但如果我理解为什么背景是灰色的而不是绿色的话，它会让它变得更容易。

非常感谢任何帮助。谢谢。

Answer 1

CSS中的“Cascade”是指样式的特殊性。

所有相同的东西，后来出现在CSS中的样式胜过之前的样式。

但是还有其他方法可以提高特异性 - 即你在提及元素时的“具体”方式。

例如，这个：

table.myClass {style}

更多特定于：

table {style}

所以即使我可以按照这种方式命令它们，第一种风格也会在使用该特定类的任何表上胜过第二种风格。

在您的情况下，#yourID .col 更多不仅仅是#anotherID

如何计算特异性可能有点棘手。 Here's but one explanation和another explanation。

在您的情况下，具体而言，“ID +子类”胜过“ID”。

Answer 2

问题是#maincontent .col比#callout

更具体

如果你把它改成#maincontent .section #callout之类的东西，你的风格就会起作用，因为它具有更高的特异性。

不要使用!important，因为它会在未来的路上造成很多问题

Answer 3

在选择要应用于元素的样式时，以下优先顺序（按顺序）：

！important（添加！对定义很重要）
Origin（内联样式标记或样式表）
特异性（您的选择器在层次结构中的具体方式）
订单（更高 - 样式表中的＆gt;更低）

在您的情况下，特异性是赢家，因为选择器在层次结构中更具体。

如果您没有#maincontent .col而.col您的ID选择器会更具体，因此适用。

但是 - 因为！important在优先顺序中排名第一，所以你总是可以添加！important来成为重写样式定义。

Answer 4

有一个css #maincontent .col，它更适合于element.So for this work -

您可以在风格后使用!important。 Example
您可以使用#maincontent #callout1这样的css，这比#maincontent .col更具体。 Example
您可以将内联css应用于元素。 Example
您可以将#maincontent .col替换为.col。 Example

Answer 5

这不仅仅是样式表中首先出现的样式。优先级的工作原理如下：

有更多ID的规则获胜。（#signs）
如果有相同数量的ID，则会有更多类获胜（带点的内容，例如：.example）
如果它们具有相同数量的ID和类，则具有更多元素的规则将获胜。
无论之前的规则如何，内联样式都会获胜。这些是在标记中嵌入“stlye”属性的样式。
规则与！重要胜利，不管以前的所有规则。例如：.thing{width:30px !important;}。在具有！important标志的规则中，先前的规则将再次应用。
对于具有相同数量的类，ID，元素和没有！重要规则的规则，样式表或页面中的顺序是重要的（最新规则获胜）。

所以你认为重要的是关于css规则优先权的不太重要的因素。

在您的示例中，第一个规则获胜，因为它有一个ID和一个类，它比其他规则中的一个ID具有更多“特异性”。如果您不想让它获胜，您必须在其他规则中添加一个类或从第一个规则中删除该类，这可能需要更改您的标记...

阅读规范非常有启发性。

http://www.w3.org/TR/CSS2/cascade.html（第6.4.3节“计算选择者的特异性”）

这些风格如何层叠？

5 个答案: