在 WordPress 父主题中覆盖 !important

Question

我有以下 CSS 代码 custom.css 风格 sheet 这是主题的一部分

.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

A selector's specificity is calculated as follows:

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules.

These rules have no selectors, so a=1, b=0, c=0, and d=0.) count the number of ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) count the number of element names and pseudo-elements in the selector (= d) The specificity is based only on the form of the selector.

the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD. Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the > specificity.

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

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

在 WordPress 父主题中覆盖 !important

Override !important In WordPress Parent Theme

css

wordpress

child-theming