为什么我的HTML不使用CSS中定义的最后一个样式？

Question

I have the following CSS that's written in this order:

h2:last-child, p:last-child, ul:last-child {
margin-bottom: 0;
}

.content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;
}

and my HTML:

<ul class="content-message">
    <li>xx</li>
</ul>

When I check I can see that the ul is getting its style from the the first CSS and it has a margin-bottom of 0. Can someone explain why this is. Also is there a way that I could fix this.

Answer 1

It is done in order of specifity. In this case, ul:last-child is more specific because it has two conditions:

• It has to be a ul
• It has to be the last child

Whereas your second style only has one condition:

• It has to have the class content-message

In order to make the second style as specific as the first you need to add another condition:

ul.content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;
}

Because the two rules are equally as specific, the second rule takes precedence because it is written last. Note that this is a simplification of css specificity - the ordering works something like this:

1. Inline styles with !important
2. Stylesheet styles with !important
3. Inline styles without !important
4. Selectors containing an id (#myItem)
5. Classes, tag names, pseudo classes etc.

Any selector from higher up the list will take precedence, while two selectors from the same level will be determined by how many of that type there are (so two classes are less specific than an id, but as specific as a style and a tag). Two styles will the same weighting will defer to the last defined style.

I may be wrong on all items in point 5 having equal weighting, but for a better understanding check out http://www.adobe.com/devnet/dreamweaver/articles/css_specificity.html or similar articles found on Google.

Answer 2

See this article that describes css specifity issues- http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Preference order- element selector < class selector < id selector

So specifying it as an Id attribute should work

   #content-message {
   margin: 20px -1.667em -1.667em -1.667em;
   margin-bottom: -1.667em;

and <ul id="content-message">

Update- In your case irrespective of the above cases, you inline style- style="margin-bottom: -1.667em;" will override any other css. Surprised to see that doesn't happen with you.

Answer 3

请在您要应用的样式上打上“！重要”标记。