0

问题可在此链接中查看。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，但我认为绿色应该出现，因为它是在向上指定的灰色。

我正在寻找一种方法来获得我需要的东西，但是如果我了解为什么背景是灰色而不是绿色的，那真的会容易得多。

任何帮助将不胜感激。谢谢你。

4

5 回答 5

3

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

所有的事情都是一样的，CSS 中出现的样式比之前的样式要好。

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

例如，这个：

table.myClass {style}

比以下更具体：

table {style}

因此，即使我可以这样订购它们，在使用该特定类的任何表上，第一种样式都会胜过第二种样式。

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

如何计算特异性可能有点棘手。这里只是一种解释和另一种解释。

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

于 2013-07-01T03:37:15.977 回答
1

问题是#maincontent .col比#callout

如果您将其更改为类似的内容#maincontent .section #callout，您的样式将起作用，因为它具有更高的特异性。

不要使用!important，因为它可能会在以后导致很多问题

于 2013-07-01T03:30:26.577 回答
1

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

  1. !important（将 !important 添加到定义中）
  2. Origin（内联样式标签，或在样式表中）
  3. 特异性（您的选择器在层次结构中的具体程度）
  4. 顺序（样式表中更高 -> 更低）

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

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

但是 - 由于 !important 在优先顺序中排名第一，因此您始终可以添加 !important 以成为最重要的样式定义。

于 2013-07-01T03:36:12.373 回答
0

这不仅仅是关于样式表中最先出现的样式。优先级的工作方式如下：

  1. 具有更多 id 的规则获胜。（#标志）
  2. 具有相同数量的 id，具有更多类的人获胜（带点的事物，例如：.example）
  3. 如果它们具有相同数量的 id 和类，则具有更多元素的规则获胜。
  4. 无论以前的规则如何，内联样式都会获胜。这些是在标记中嵌入了“stlye”属性的样式。
  5. 无论之前的所有规则如何，带有 !important 的规则都会获胜。例如：.thing{width:30px !important;}。在带有 !important 标志的规则中，将再次应用之前的规则。
  6. 对于具有相同数量的类、id、元素并且没有 !important 规则的规则，样式表或页面中的顺序是最重要的（最新的规则获胜）。

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

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

阅读规范非常有启发性。

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

于 2013-07-01T04:27:30.987 回答
0

有一个 css #maincontent .col，它更特定于元素。所以对于这项工作 -

  1. 您可以!important按照自己的风格使用。 例子

  2. 您可以像这样制作您的 css #maincontent #callout1，这比#maincontent .col. 例子

  3. 您可以将内联 css 应用于元素。 例子

  4. 您可以替换您的#maincontent .colto .col。 例子

于 2013-07-01T04:17:08.653 回答