Question

我有一些链接的CSS类。有人可以解释下面的代码如何工作？它将文本显示为绿色。有人可以解释一下吗？

＆＃13;

<html>

<head>
  <style>
    .a .c {
      color: red;
    }
    .b .c {
      color: green;
    }
    .c {
      color: blue;
    }
  </style>
</head>

<body>
  <div class="a">
    <div class="b">
      <div class="c">
        hi
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

第一个说明任何包含c项的项目中包含a类的项目都会被着色为红色。

.a .c {
    color: red;
}

第二个说明，任何类c项目中b类的项目都会被着色为绿色。第一条规则需要优先级，因为它与第一条规则一样深，但在规则之后定义。

.b .c {
    color: green;
}

这表示类c的任何项目都应为蓝色。但由于不像上述规则那样具有描述性，因此不优先。如果您有一个类c的项目未嵌套在类a或b中，则此规则将生效。

.c {
    color: blue;
}

因此需要记住两条规则：

更具体的规则优先级更高
后来定义的规则比其特定的规则具有更高的优先级。

Answer 2

一直到特异性。

多个CSS规则可能针对同一个元素，但具有更高特异性的元素将取代所有其他元素。

在您的方案中，.b .c比.c更具体。因此，前者是“赢家”。规则（颜色为green设置）。

以下是我所谈论的概念的一个很好的介绍：

http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Answer 3

它不是链接类，而是更多关于CSS中级联顺序和继承的问题。

你必须知道在层叠样式表中你有一些阅读优先权。

您的规则的顺序非常重要。

在你的例子中：

.a .c { color: red   }
.b .c { color: green }
   .c { color: blue }

<div class="a">
  <div class="b">
    <div class="c">
      text
    </div>
  </div>
</div>

最后一个选择器声明“始终”仅优先如果他们的选择器长度相等。你的选择器更多具体，更多是他的首要任务。

最后一个是.c { color: blue }（但选择器的长度仅为“2”）
而不是.a .c { color: red }（即“5”）
然后我们可以看到我们有另一个选择器.b .c和.a .c（但此处.b .c是最新声明的选择器）

<强>因此 .b .c { color: green } 已应用。

其他一些例子要理解：

这里只是为了理解订单很重要：

.b .c { color: green }
.a .c { color: red   }
   .c { color: blue  }

<div class="a">
  <div class="b">
    <div class="c">
      text
    </div>
  </div>
</div>

这里要了解长度很重要：

.b .c    { color: green }
.a div.c { color: blue  }
.a .c    { color: red   }

<div class="a">
  <div class="b">
    <div class="c">
      text
    </div>
  </div>
</div>

Answer 4

C ascading S tyle S heets

如果在它之前有相同的声明，那么最后一个声明将始终优先。

将其视为1级等于1分。

@ColorInt @Deprecated public int getColor(@ColorRes int id) throws NotFoundException { return getColor(id, null); } = 1分

.a = 1分

.b = 1分

.c = 2分

.a .c = 2分

所以在.b .c＆amp; .a .c声明它们在点数上相等，并且不仅仅是.b .c声明。所以CSS接下来要看的是最后的东西。由于.c声明在样式表中排在最后，因此浏览器将使用该声明进行样式设置。

Answer 5

由于CSS特异性，文本显示为绿色。具有两个类的选择器将仅覆盖一个选择器。它是绿色而非红色的原因是因为.b .c排在最后。

Answer 6

第一个规则设置颜色，然后第二个规则覆盖第一个规则，因为它是第二个，两个规则具有相同的特异性。第三条规则不太具体，因此省略。

Answer 7

您需要知道顺序对样式很重要，例如：

.a .c { /* styles*/} // go first 
.b .c { /* styles*/} // go next

第二个样式重载样式在.c和.b之前写入.c（取最后一个）但不重载.c类因为.c是常见的案例样式;

CSS特异性如何工作？

7 个答案: