为什么我的HTML不使用CSS中定义的最后一种样式？ [英] Why does my HTML not use the last style defined in the CSS?

问题描述

我有以下顺序编写的CSS：

  h2：last-child，p：last-child， ul：最后一个孩子{
 margin-bottom：0; 
} 
 
 .content-message {
 margin：20px -1.667em -1.667em -1.667em; 
 margin-bottom：-1.667em; 
} 
  

和我的HTML：

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

当我检查时，我可以看到ul从第一个
CSS和它的底边为0.有人可以解释为什么这是。另外
是否有办法解决这个问题。 /archives/css_specificity_wars.htmlrel =nofollow> http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

首选顺序 - 元素选择器<类选择器< ID选择器

因此，将其指定为ID属性应该可以工作

 ＃content-message {
 margin：20px -1.667em -1.667em -1.667em; 
 margin-bottom：-1.667em; 
  

和< ul id =content-message>

更新 - 在你的情况下，不管上述情况如何，你内联style- style = margin-bottom：-1.667em;会覆盖任何其他的CSS。惊讶地发现这不会发生在你身上。

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.

解决方案

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.

这篇关于为什么我的HTML不使用CSS中定义的最后一种样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！