这有一个无序的list：

<ul id="summer-drinks">
   <li>Whiskey and Ginger Ale</li>
   <li>Wheat Beer</li>
   <li>Mint Julip</li>
</ul>

现在你想从列出的这些饮料中，选择一个自己喜欢的饮料：

<ul id="summer-drinks">
   <li class="favorite">Whiskey and Ginger Ale</li>
   <li>Wheat Beer</li>
   <li>Mint Julip</li>
</ul>

于是你打开自己最喜欢的编辑器，键入下面这些CSS代码，然而，它并没有工作！

.favorite {
  color: red;
  font-weight: bold;
}

你经过一番探索之后，发现这个文件中还隐藏着这样一段代码：

ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;
}

选择哪一条语句来运用这个CSS上是需要遵循规则的。事实上，当specificity值相同的时候，最下边的那条规则会取胜：

.favorite {
   color: red;
}
.favorite {
   color: black;
}

你可以通过尽可能详细的设置CSS或者使用!important来控制CSS，像这样：

html body div#pagewrap ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

或者这样：

.favorite {
  color: red !important;
  font-weight: bold !important;
}

但我想说的是，这样会让你的CSS代码特别容易难以阅读，而且也不会带来什么真正的好处。!important也很容易就会被误用。

CSS为ID和class应用了不同的权重：

换句话说：

CSS 权重

results matching ""