特定页面的WordPress自定义CSS未加载答案

【问题标题】：Wordpress custom CSS for specific page not loading特定页面的WordPress自定义CSS未加载
【发布时间】：2022-02-15 12:45:54
【问题描述】：

我正在尝试为特定的 wordpress 页面更改一些 CSS。应该是我可以在新的 css 规则之前添加 .page-id-# 。这看起来很简单，但我就是无法让它工作。我尝试了不同的选择器、添加 !important、尝试不同的浏览器、检查 id、尝试不同的页面等，但自定义 css 永远不会加载。

例如。在我尝试过的代码中，第 2 页上的文本应该是蓝色而不是红色，但自定义 css 不会加载，因此它保持红色。我错过了什么明显的东西吗？

第 1 页 -------------------

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />

    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />

    <?php
    wp_head();
    ?>
  </head>


  <body>

  
    <div class="change_colour">Hello</div>
    <div>
    <a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>

  </body>

</html>

第 2 页-----------------------------------------

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />

    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />

    <?php
    wp_head();
    ?>



  </head>



  <body>

  
    <div class="change_colour">Hello</div>
    

  </body>

</html>

CSS------------------------

/*
Theme Name: Testing
Text Domain: Testing
Version: 1.0
Decription: 
Tags: 
Author: Jonny

*/


.change_colour {
    color: red;
}

.page-id-2 .change_colour {
    color: blue;
}

【问题讨论】：

.page-id-2 .change_color 1）您调用的 CLASS page-id-2 不是您问题中指定的 ID .. 2）类名在 css 中拼写不正确 .. 作为您的 div 元素使用.change_colour，在你的css中拼写为.change_color
抱歉，犯错了。我改了拼写，还是不行。 ID是指页面ID，但我读过的所有帮助都说它被称为类，例如。 “.page-id-2”
您的代码应该可以正常工作，至少从您在问题中发布的内容来看。使用检查器工具检查类的准确拼写，以及是否真的将 page-id 类添加到正文标记中。
谢谢，是的，我没有将 page-id 类添加到正文中

标签： html css wordpress

【解决方案1】：

您必须在开始的正文标签中添加<?php body_class(); ?>，然后您必须检查页面并检查您的 .page-id-** 类的正文标签，然后根据您在正文中获得的类编写 CSS标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
    <?php
    wp_head();
    ?>
  </head>
  <body <?php body_class(); ?> >
    <div class="change_colour">Hello</div>
    <div>
    <a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>
  </body>
</html>

【讨论】：

谢谢，我已经尝试过了，但它仍然给了我我已经在使用的相同页面 ID。编辑：等待它的工作原理！谢谢！我不知道将 page-id 类添加到正文中