在WordPress中使用CSS隐藏指定div的问题求助

问题描述 #

需要隐藏的目标HTML结构：

<div class="count">
    <div class="number">1</div>
    <div class="text">donation</div>
</div>

已尝试但未生效的CSS代码：

• 基础选择器写法：

.count {
  display: none;
}

• 带页面ID的选择器写法：

body.page-id-750 div.count {
  display: none;
}

当前页面的body标签属性：

<body itemtype="https://schema.org/WebPage" itemscope="itemscope" class="page-template-default page page-id-750 logged-in admin-bar wp-custom-logo ast-single-post ast-mobile-inherit-site-logo ast-inherit-site-logo-transparent ast-theme-transparent-header ast-hfb-header ast-page-builder-template ast-no-sidebar astra-3.9.2 elementor-default elementor-kit-442 elementor-page elementor-page-750 customize-support e--ua-blink e--ua-chrome e--ua-webkit ast-mouse-clicked ast-header-break-point"

可行解决办法 #

• 提升选择器优先级：由于你使用了Astra主题+Elementor，默认样式优先级可能更高，可尝试给规则添加!important（优先用更具体的选择器，仅在必要时使用该方法）：

body.page-id-750 .count {
  display: none !important;
}

• 用Elementor专属类精准定位：利用body标签中的elementor-page-750或elementor-kit-442类编写选择器：

.elementor-page-750 .count {
  display: none;
}

• 检查CSS加载顺序：确保你的CSS代码添加在主题自定义CSS（外观→自定义→额外CSS）或当前Elementor页面的自定义CSS面板中，保证加载顺序在主题和Elementor默认样式之后。
• 清除缓存：清理WordPress后台缓存、浏览器缓存及CDN缓存，避免旧样式未被替换导致新规则不生效。

内容的提问来源于stack exchange，提问作者Hafsah Nasir