css - CSS 中如何使用样式

Question

嗨，我是 CSS 新手，正在玩。我有这个例子

HTML:

<div>
    <h4>International News</h4>
    <article>
        <h4 class= "headline"> New Developments! </h4>
        <aside>
            <h4>Impact on Markets</h4>
        </aside>
    </article>
  </div>

CSS:

h4 {color:powderblue;}
.headline{color:red;}
article {color:black;font-style:normal;}
aside h4{font-style:italic !important; color:yellow;}
article h4{font-style:normal; color:sienna;}

为什么“市场内部”h4 使用的是赭色而不是黄色？ 抱歉，如果这是一个愚蠢的问题。

Answer 1

参见the cascade .

color:yellow 和 color:sienna 都不是 !important (这很好，!important 太糟糕了)。

aside h4 和 article h4 都匹配该元素。

aside h4 和 article h4 都包含 2 个类型选择器，并且没有其他任何影响特异性的内容，因此 specific 是同样的。 .

文章 h4 是 defined last ，因此它最后应用并覆盖之前的匹配规则。