Question

我有以下html5代码。我希望文字商业广告的样式为斜体，颜色为黄色。但它是红色的。

只能将某些样式应用于旁边元素吗？

CSS：

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

HTML：

<div>
    <article>
        <aside>
            <h4>Business Ads</h4>
        </aside>
    </article>
</div>

Answer 1

这是CSS特异性工作方式的结果。这里的页面：

提供了一个很好的解释。在这种情况下，由于两个样式声明都引用较大元素中的h1，因此它们具有相同的特异性，并且最新声明的样式优先。你可以用！important来覆盖它，但它通常被认为是糟糕的风格，因为它打破了CSS的“级联”性质。相反，请使用更具体的选择器：

article aside h1 {

   //style goes here

}

Answer 2

您可以按照设置CSS的方式覆盖规则。两个规则都以相同的元素为目标，因此第二个规则将覆盖第一个元素并应用于元素。

例如，如果您将反对点顺序设置为您的规则：

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

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

第二个是aply，h4将是黄色和斜体

因此，如果您h4内也有article，则可以使用此代码：

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

Answer 3

您必须对选择器更加具体，以便分配它的规则会覆盖＆＃34;默认＆＃34;一。您可以删除!important，这不是在您使用其他技术时覆盖现有规则的最佳方法。

<强> DEMO

article aside h4 {
    font-style: italic;
    color: yellow;
}
article h4 {
    font-style: normal;
    color: red;
}

Answer 4

您的目标是使用相同的h4元素，但是您使用了不同的样式最后一个被读了。只需删除

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

并删除第一个选择器中的!important。如果你的目标是在文章或旁边的标签中定位不同的h4标签，你可以做的就是把类或跨度放在它们上面。