样式按顺序加载，但 Bootstrap 仍然覆盖 WordPress 子项

Posted 2023-03-06

【中文标题】样式按顺序加载，但 Bootstrap 仍然覆盖 WordPress 子项

【英文标题】：Styles loaded in order, but Bootstrap still overrides WordPress child

【发布时间】：2018-07-06 23:15:10

【问题描述】：

我创建了一个 WordPress 子主题，它可以在源代码中正确呈现 Bootstrap 和 child-styles.css：

Source code stylesheet order

然而，我的链接的颜色仍然被 Bootstrap 覆盖，正如使用 Chrome 进行检查所看到的那样：

Chrome inspection window

我的 Bootstrap 目录中没有任何 .scss 文件，尽管我承认我不确定这些文件如何编译为 CSS。不管怎样，在 Bootstrap 之后加载了 child-styles.css，它是如何被覆盖的？

【参考方案1】：

在 Bootstrap 之后加载了 child-styles.css，它是如何被覆盖的？

出现这种情况的原因是因为 Bootstrap 规则具有更高的特异性。所以，它赢了。

这：.navbar-dark .navbar-nav .nav-link 比这更具体：.nav-link。

如果您为自定义规则赋予相同级别或更高的特异性，您的自定义规则将胜出并被覆盖。

【讨论】：

太棒了！我只是写了.navbar-dark .navbar-nav .nav-link color:aquamarine; 并且它起作用了，假设虽然我使用了相同的特异性，但 child-styles.css 最后加载并因此被使用。