Question

请有人解释为什么文本对市场的影响＆＃39;绿色而不是黄色？我原以为这是黄色的

HTML

<div> 
   <h4> International news </h4>
   <article>
      <h4 class= "headline"> news develop</h4>
      <aside>
         <h4> impact on market </h4>
      </aside>    
   </article>
</div>

CSS

h4 {
   color:blue;
}

.headline {
   color:red;
}

article {
   color:black;
   font-style:normal;
}

aside h4 {
   font-style: italic !important;
   color yellow;
}

article h4 {
   font-style:normal;
   color: green;
}

Answer 1

这是因为article h4在aside h4之后，他们的特异性程度是相等的。 CSS文件从上到下进行处理，如果另一种样式具有相同或更高的特异性，则会覆盖以前的样式。

您可以使用：

side > h4 {
   font-style: italic !important;
   color yellow;
}


article > h4 {
   font-style:normal;
   color: green;
}

>表示只影响直系后代。这通常比!important更好用，因为!important被认为是最后的手段。

关于CSS特异性的进一步阅读：
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
http://css-tricks.com/specifics-on-css-specificity/

进一步阅读!important：
http://css-tricks.com/when-using-important-is-the-right-choice/

Answer 2

您放置它们的顺序。最后一个是最后一个，因此更重要。

尝试：

article aside h4 
{
font-style: italic !important;
color: yellow;
}

更多地指定结构。

替代方案，创建一个类。

<h4 class="level3"> impact on market </h4>

然后添加

.level3
{
 color: yellow;
}

Answer 3

关于CSS权重，这里

article h4

重写

aside h4

您可以更改订单或编辑

aside h4

的

article aside h4

它会起作用。两者都可以工作，更改顺序或编辑选择器。

css的特异性和颜色

3 个答案: