WordPress Elementor中CSS仅显示coaching分类文章代码失效求助

一、原有CSS失效的原因 #

你的代码没生效，大概率是Elementor的文章模块HTML结构和原生WordPress不同，原生的article.type-post选择器不匹配Elementor渲染的文章元素，或者选择器优先级不够被Elementor自带样式覆盖。

二、调整后的CSS解决方案（两种可行方案） #

方案1：匹配Elementor Posts模块标准类名 #

Elementor的文章列表通常用.elementor-post作为单篇文章的容器类，直接针对这个类调整：

.elementor-post:not(.category-coaching) {
    display: none !important;
}

• 加!important是为了确保优先级高于Elementor默认样式，避免被覆盖。

方案2：针对嵌套结构的精确选择器 #

如果分类类名不在.elementor-post上，而是在其子元素（比如文章卡片内部容器），可以右键页面文章元素→「检查」，定位实际HTML结构后调整选择器。例如：

.elementor-post__card > article:not(.category-coaching) {
    display: none;
}

三、更优方案：用Elementor自带筛选（推荐） #

CSS隐藏只是视觉上隐藏，文章内容依然会加载，影响页面性能。更高效的方式是直接在Elementor设置里筛选分类：

• 进入Elementor编辑器编辑目标页面
• 找到Posts模块，打开右侧设置面板
• 在「内容」选项卡的「分类」中，只勾选「coaching」分类
• 保存设置即可，无需额外CSS

内容的提问来源于stack exchange，提问作者Jeanie Benson