如何为WordPress特定页面编写专属CSS样式？

一、先排查Simple Custom CSS失效的常见原因 #

• 插件未激活或版本过旧：去后台插件列表确认状态，更新到最新版
• 缓存干扰：清除浏览器缓存、网站缓存插件（如WP Rocket）、服务器缓存
• CSS选择器权重不足：你的样式被主题/其他插件的高权重样式覆盖，可通过浏览器F12审查元素查看样式是否被划掉
• 代码语法错误：检查CSS里有没有写错括号、分号

二、替代实现方案（优先级从易到难） #

1. 用页面专属ID/类写精准CSS #

每个WordPress页面都有唯一的ID和类，直接针对这些标识写样式即可：

• 找页面ID：后台编辑页面时，地址栏post=xxx里的xxx就是ID；或者前端F12看body标签的class，比如page-id-123
• 示例代码（比如给ID为123的页面改头部样式）：

/* 页面ID:123 专属样式 */
.page-id-123 .site-header {
    background-color: #2c3e50;
    color: #ffffff;
}
.page-id-123 .entry-title {
    font-size: 28px;
    text-align: center;
}

• 若样式仍不生效，可临时加!important（优先调整选择器权重，尽量少用）：

.page-id-123 .site-header {
    background-color: #2c3e50 !important;
}

2. 用主题自带的自定义CSS功能 #

几乎所有主流主题都自带自定义CSS编辑器，优先级高于第三方插件：

• 路径：后台「外观」→「自定义」→「额外CSS」
• 把上面的页面专属CSS粘贴进去，保存即可生效

3. 子主题style.css添加样式 #

如果需要长期维护样式，推荐用子主题（避免主题更新丢失修改）：

• 先创建并激活子主题（可通过主题编辑器或FTP操作）
• 打开子主题的style.css文件，添加页面专属CSS，示例：

/* 针对"联系我们"页面（ID:456）的样式 */
.page-id-456 .main-content {
    padding: 30px;
    border: 1px solid #eee;
}

4. 给特定页面内嵌CSS #

如果只想给单个页面加样式，可直接在页面里内嵌：

• 编辑页面时切换到「代码编辑器」模式，在页面顶部添加：

<style>
    body.page-id-789 {
        background: #f8f9fa;
    }
</style>

• 或者用页面编辑器的「自定义HTML」块，把上述代码块插入页面头部位置

内容的提问来源于stack exchange，提问作者B9r Volvo