0

我在作为主主题的一部分的 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。因为如果我可以覆盖它，那么我的子主题中的代码就会生效

4

2 回答 2

2

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

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

或其他父元素...

花点时间了解 CSS 选择器优先级：

了解 CSS 选择器优先级/特异性

选择器的特异性计算如下：

如果声明来自是“样式”属性而不是带有选择器的规则，则计数为 1，否则为 0 (= a)（在 HTML 中，元素的“样式”属性的值是样式表规则。

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

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

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

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

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

于 2018-11-13T15:26:36.557 回答
1

它应该可以工作，确保对主题的 css 的调用高于 HTML 中的自定义 css

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

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

于 2018-11-13T14:39:15.693 回答