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;}

为什么＆＃34;在市场上？＆＃34; h4使用的是sienna而不是黄色？对不起，如果这是一个愚蠢的问题。

Answer 1

请参阅the cascade。

color:yellow和color:sienna都不是!important（这很好，!important太可怕了。）

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

aside h4和article h4都包含2种类型的选择器，而不会影响特异性，因此同样specific。

article h4为defined last，因此最后应用并覆盖之前的匹配规则。

Answer 2

因为代码是从顶部到底部正确读取的。

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

首先，您将aside（以及它的孩子）中的h4给予黄色。

这就是这个： <h4>Impact on Markets</h4>

然后你给article（和它的孩子们）中的h4一个颜色sienna。

它会立即覆盖代码。如果你切换线条的位置，你会发现它现在变黄了。

JSFiddle demo

Answer 3

尝试使用以下CSS

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

此处>会强制选择器在直接子/子项上应用样式而不是孙子/孙子

如何在CSS中使用样式

3 个答案: