woocommerce css 加载为依赖项不起作用答案

【问题标题】：woocommerce css load as dependency not workingwoocommerce css 加载为依赖项不起作用
【发布时间】：2018-06-30 08:05:25
【问题描述】：

我正在尝试在 woocommerce css 之后将我的自定义 css 加入队列，但我不知道为什么它不起作用。

这里的文档应该很简单：https://developer.wordpress.org/reference/functions/wp_enqueue_style/

这是我的代码

function my_theme_enqueue_styles() {

    $deps = array( 'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general');

    wp_enqueue_style('header', get_template_directory_uri() . '/css/header.css', $deps, '3.2.6', 'all');

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');

我的自定义 css header-css 确实已加载，但在依赖项之前。我尝试了各种可能性（有或没有版本号，有或没有媒体参数），但没有任何成功。

我在其他来源中找到了相同的解决方案，例如：https://bigwilliam.com/override-woocommerce-styles-semantically/

即使我不能使用 get_stylesheet_directory_uri()，因为我的不是子主题。

如下图所示，woocommerce 样式覆盖了“logo”类的高度，因为它实际上是在woocommerce-layout.css之前而不是之后加载的时间>。我不知道该怎么办。

woocommerce override my custom styles

【问题讨论】：

添加您提供的代码后，尝试从网站和浏览器中删除缓存。可能只是缓存问题
感谢您的回复。不幸的是，删除缓存后问题仍然存在。

标签： wordpress woocommerce dependencies styles overriding

【解决方案1】：

我得到了答案！

我的自定义 css 实际上是在 woocommerce-layout.css 之后加载的，这是一个选择器级联 css 规则问题 (https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade)

这是我的 HTML

<body class="page-template-default page page-id-5 logged-in woocommerce-cart woocommerce-page">
   ...
   <img id="logo" class="logo" src="img/secondary-color-positive.svg">
   ...
</body>

上图显示

.woocommerce-page img 覆盖 .logo 属性

这不是因为我的自定义 css 之前已加载（如我所想），而是因为根据 selector cascade css，.woocommerce img 比 .logo 强规则

我只是更改了我的 css 就解决了它：

来自这个.logo{...} #logo{...}

现在 #logo 比 .woocommerce img 更强大，如下所示

custom css override woocommerce-css

【讨论】：