Question

如果我在我的css中有这两个标签组合，我就会挣扎：

aside h4 {
  color:yellow;
}

article h4 {
  color:blue;
}

我将它们应用于以下HTML

    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>

为什么 对Marckets的打击 是蓝色，我认为它应该是黄色的？我认为在这种情况下标签应该从内到外应用，而不是相反。这是文章标签吗？

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>
</body>
</html>

＆＃13;

标签

Answer 1

你的问题是由于CSS选择器的特殊性。您可以阅读更多here

因此，为了解决您的问题，您必须在声明CSS规则时更加具体。在你的情况下，你采取这个规则：

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

并添加.headline类，文本变为黄色

article h4.headline {
    font-style:normal;
    color:blue;
}

这是新规则的缩写：http://jsfiddle.net/x73hne3v/

Answer 2

这是因为article h4和aside h4具有相同的特异性。鉴于它们具有相同的相关性，将使用CSS文件中的最后一条规则。

特异性是基于每个选择器类型的计数应用于给定CSS声明的权重。在特异性相等的情况下，CSS中的最新声明应用于元素。特异性仅适用于目标相同的元素。直接针对元素的CSS规则将始终优先于元素从祖先继承的规则。

特异性（https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）

如果在CSS中切换位置，文本将为黄色。

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
    <div>
        <h4>International new</h4>
        <article>
            <h4 class="headline">New Developments!</h4>
            <aside>
                <h4>Impact On Marckets</h4>
            </aside>
        </article>
    </div>
</body>
</html>

Answer 3

这是因为您的article h4 CSS规则位于页面底部 - 如果您在底部包含aside h4，那么它将覆盖之前的引用。

正如其他人所提到的，使用CSS特性（对CSS规则更具体）。

Answer 4

我认为在您的css文件中，您只需要更改以下属性。

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

CSS Combinator问题

4 个答案: