CSS 已加载但未应用

Question

我知道有人问过这个问题，但那个人打错了，答案提到了 firebug，所以它不是最新的（并且已关闭）。

在 WordPress 中，我注意到主文件 style.css 没有被应用，具体来说：

文件已正确加载
未应用其样式

当我检查元素时我知道某个元素是 style.css 的目标，style.css 中根本没有任何内容（检查元素的样式选项卡）。我检查了几个元素。

它是通过 WordPress 加载的（使用 _underscores 生成的未更改的调用）：

wp_enqueue_style( 'themexzz-style', get_stylesheet_uri(), array(), _S_VERSION );

这是生成的 link（点击它会像预期的那样工作）：

<link rel='stylesheet' id='themexzz-style-css'  href='http://localhost:8012/themexzz/wp-content/themes/themexzz/style.css?ver=1.0.0' media='all' />

我正在使用

Xampp 与 php 7.2.3
使用 wordpress 5.5.3
元字符集="UTF-8"
数据库排序规则是 utf8mb4_unicode_ci
这是一个下划线生成的主题

提前致谢。

Answer 1

@Xhynk - 你是对的。这是：

you may have invalid CSS way at the beginning of that file, blocking all the rest of the CSS being applied

因为它是一个下划线主题，我从另一个文件应用了我自己的 CSS，所以我什至没有想到 style.css 中可能存在无效的 CSS

谢谢@Xhynk

Answer 2

CSS 文件在 head 标签中的位置也很重要，假设你在head标签

中加载了2个CSS文件

<link rel='stylesheet' href="..../style.css"> 
<!--(have property of background color blue and text white)-->
<link rel='stylesheet' href="..../mycss.css">
<!--(have property of background color white and text black)-->

如果您按此顺序放置标签

<head>
<link rel='stylesheet' href="..../style.css"> 
<link rel='stylesheet' href="..../mycss.css">
</head>

这两个文件都将被加载，但 CSS 将应用于 myss.css 文件，这是因为 CSS 覆盖

您可以更改 link 标签的位置以获得您想要的输出

CSS 已加载但未应用

CSS Loaded but not being applied

html

css

wordpress

localhost

enqueue