学步园

译言 http://article.yeeyan.org/view/119115/74057

原文 http://css-tricks.com/855-specifics-on-css-specificity/

计算CSS特定的值

刚才为什么我们第一次尝试改变字体的大小和颜色失败了呢？ 随着我们的学习，它是因为标签自己简单的运用类名，拥有较低的特性值，被其他的指向这个无序列表的具有ＩＤ值的选择器“压倒”。在那个句子中，重要的字眼是class和 ID。ＣＳＳ不关心用class 和IDs做什么，但是它却给他们赋予不同的特定权重。事实上，一个ＩＤ拥有比一个class大10倍的特定权重。让我们看看特定值是怎么计算的：

I've never specifically covered this subject before. (rimshot!)

The best way to explain it is to start with an example of where specificity gets confusing and perhaps doesn't behave like you would expect. Then we'll take a closer look at how to calculate the actual specificity value to determine which selector takes precedence.

Here is a simple unordered list:

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

Now you want to designate one of these your favorite drink and change its styling a bit. You need a hook for this so you apply it via a class name on the list element.

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

Now you pop open your CSS and do your styling for your new class:

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

Then you take a look at your work, but alas, it didn't work! The text of your favorite drink didn't turn red or go bold! Something fishy is at work here.

Poking around more in the CSS, you find this:

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

There is your trouble right there. Two different CSS selectors are telling that text what color and font-weight to be. There is only one statement for font-size, so clearly that one will take effect. These aren't "conflicts" per-say, but the browser does need to decide which one of these statements to honor. It does so by following a standard set of specificity rules.

I think this confuses some beginners because they haven't quite gotten this sorted out yet. They might think because the .favorite statement is "further down in the CSS" or because the class="favorite" is "closer to the actual text" in the HTML that will be the one that "wins".

In fact, the order of selectors in your CSS does play a role and the "further down" one does in fact win when the specificity values are exactly the same. For example:

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

The color will be black... but I digress.

The point here is you want to be as specific as it makes sense to beevery chance you get. Even with the simple example presented above, it will become obvious to you eventually that simply using a class name to target that "favorite drink" isn't going to cut it, or won't be very safe even if it did work. It would have been smart to use this:

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

That is what I'm calling "being as specific as it makes sense to be". You could actually be way more specific and use something like this:

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

But that is over the top. It makes your CSS harder to read and yields no real benefits. Another way to juice up the specificity value for your ".favorite" class is to use the !important declaration.