Question

在custom.css样式表中有以下CSS代码，这是主主题的一部分

.thm-unit-test h3 {
    font-size: 28px !important;
}

我已将以下代码添加到子主题CSS

.thm-unit-test h3 {
    font-size: 18px !important;
    color: #222;
    font-weight: 700;
}

但是它不起作用。考虑到这一点，我该如何覆盖custom.css主文件中的！important 。因为如果我可以覆盖它，那么子主题中的代码就会生效

Answer 1

它应该工作，确保对主主题的CSS的调用位于HTML中自定义CSS的上方

<head>
    <link rel="stylesheet" type="text/css" href="themeCss.css">
    <link rel="stylesheet" type="text/css" href="yourCustomCss.css">
</head>

让我知道这是否对您有帮助！

Answer 2

使用它前面的Body标签...更具体：

body .thm-unit-test h3 {
    font-size: 28px !important;
}

或其他父元素...

花一些时间来了解CSS选择器优先级：

Understanding CSS selector priority / specificity

选择器的特异性计算如下：
     如果声明来自，则
计数1是'style'属性，而不是   带有选择器的规则，否则为0（= a）（在HTML中，   元素的“样式”属性是样式表规则。

这些规则没有   选择器，因此a = 1，b = 0，c = 0和d = 0。）计算ID的数量   选择器中的属性（= b）计算其他属性的数量   选择器中的伪类和伪类（= c）计算元素的数量   选择器中的名称和伪元素（= d）的特异性是   仅基于选择器的形式。

“ [id = p33]”形式被视为属性选择器（a = 0，b = 0，   c = 1，d = 0），即使id属性在广告代码中被定义为“ ID”   源文档的DTD。连接四个数字a-b-c-d（在a中   具有较大基础的数字系统）给出了特异性。

尤其是，形式为[[id = p33]”的选择器被视为属性选择器   （a = 0，b = 0，c = 1，d = 0），即使id属性在源中定义为“ ID”   文档的DTD。   在基数较大的数字系统中，将四个数字a-b-c-d串联起来可以提供>特异性。

https://www.w3.org/TR/CSS2/cascade.html#cascading-order

我会在tbf前面使用一个ID。

覆盖！在WordPress父主题中很重要

2 个答案: