CSS id-element覆盖其子的定义

Question

#top a {
  color: #C6D6CA;
  margin: 0 25px;
  text-decoration: none;
}

.mainlink a {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
}

.mainlink div位于#top one中的某个位置。为什么#top a（parental）定义的margin会覆盖.mainlink中的一个？如何改变这种行为？

Answer 1

您可以通过更改规则来修复它：

#top a {}
#top .mainlink a {}

Answer 2

这称为选择特异性。另见：{{3p>

Answer 3

由于CSS“级联”，颜色将适用于任何元素的子元素。您需要为子项指定颜色，并可能需要在属性声明的末尾添加“！important”。

Answer 4

当样式表级联时，命名ID的优先级高于类。

http://www.w3.org/TR/CSS2/cascade.html

您可以使用margin: 0 !important强制覆盖。

Answer 5

#top a选择器的specificity多于.mainlink a。 ID选择器极大地增加了选择器的特异性。

每个ID将选择器的特异性提高100倍。每个类将特异性提高10倍。

既然如此，我要么：

一个。用类或替换ID B.将ID添加到第二个选择器。