覆盖单个页面的主题 CSS

Question

我浏览了数百个关于教程、问题论坛、youtube 视频等的网页。我尝试编辑 header.php、创建子主题和编辑新样式表，甚至将我的部分内容放入css 与本页上的 html 内联。似乎没有什么能完全影响现有的 CSS 并以我希望的方式显示页面。

目标是让 wordpress 页面看起来像样式正确的页面。

我在本地主机上创建的文件中正确实现的设计照片：here

以及当我将 HTML 放入 wordpress 页面时错误实现设计的照片：here

这里是 CSS:

body {
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
 }
 h1, h2, h4, h5, h6 {
color: #b1997b; 
font-weight: 600; !important
line-height: 1.3em; !important
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif; !important
 }

 a {
text-align: center;
text-decoration: none;
color: #b1997b;
font-size: 1em;
display: inline;
 }

 a:hover{ 
text-decoration: underline;

 }


 .input {
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
display: block; 
height: 3em; 
width: 20em;
margin: 0 auto;
border: none;
border-bottom: 0.05em solid #9C9B9B;
 }

 h3 {
font-size: 1em;
color: #84A0B1;
font-weight: 600;
line-height: 1.3em;
display: inline;
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
 }
 h2 {
margin-top: 1.3em; !important
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif; !important
 }
 b, strong {
font-weight: 600;
 }
 .buttonText {
text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 1.2em;
display: inline;
 }
 blueColor {
color: #84A0B1;
 }
 brownColor {
color: #b1997b;
 }
 hr {
display: block;
 }

 grayColor {
color: #9C9B9B;
 }
 samp {
display: none;
 }


 .submitbutton{

display: block;  /* inline for text and button */

border: 0.1em; 
border-radius: 0.5em;
background-color: #e6e5e5; 
width: 14em; 
height: 3.5em;
outline-color: #C0C0C0;


text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 0.7em;
 }

.offColor {
background-color: #c7c7c7;
 }
 .canceler {
display: block;
margin: 0.5em;
border: 0.1em;
border-radius: 0.5em;
background-color: #e6e5e5;
width: 6em;
height: 3em;
outline-color: #C0C0C0;
 }
 .linktext{
display: inline;
margin: 0.5em;
text-align: left;
color: #84A0B1;
font-size: 1em;
 }
.hidden { 
display: none; 
 }

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
display:      inherit;
margin-left:  auto;
margin-right: auto;
position:     fixed;
z-index:      1000;
top:          0;
left:         0;
height:       12.5em;
width:        10em;
border-style: none;
z-index:      1002;
}
 .centered {
  position: fixed;
  top: 50%;
  left: 50%;
 /* bring your own prefixes */
  transform: translate(-50%, -50%);
     }

.overlay {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: #FFFFFF;
opacity:0.8;
z-index:1001;
}
.stop {display: none;}

.show {display: block;}

这是页面的 html：

<body>  
            <!-- Locations --!>
        <h2 class = "h2 locations"  style = "text-align: center;">look for your location</h2>



        <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>


        <p class="locations" style = "display: block; text-align: center">california</p>

             <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block" >beverly hills</h3>
                        <p class="locations" style = "display: block">9873 S. Santa Monica Blvd.<br> Beverly Hills, CA 90212</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="beverlyHills" id = "beverly hills"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block"">dana point</h3>
                        <p class="locations" style = "display: block">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="danaPoint" id = "dana point"><p class = "buttonText">select</p></button>   
                </div>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">manhattan beach</h3>
                        <p class="locations" style = "display: block">3713 Highland Ave, 2nd Floor<br> Manhattan Beach, CA 90266</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="manhattanBeach" id = "manhattan beach"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">newport beach</h3>
                        <p class="locations" style = "display: block">2744 East Coast Hwy, 2nd Floor <br>Newport Beach, CA 92625</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="newportBeach" id = "newport beach"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">santa monica</h3>
                        <p class="locations" style = "display: block">1229 Montana Ave, 2nd Floor<br> Santa Monica, CA 90403</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="santaMonica" id = "santa monica"><p class = "buttonText">select</p></button>
                </div>




            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>


        <p class="locations" style = "display: block; text-align: center">new york</p>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">union square</h3>
                        <p class="locations" style = "display: block">114 4th Ave.<br> New York, NY 10003 </p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="unionSquare" id = "union square"><p class = "buttonText">select</p></button>
                </div>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>



        <p class="locations" style = "display: block; text-align: center">pennsylvania</p>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">philadelphia</h3>
                        <p class="locations" style = "display: block">1120 Walnut St. <br> Philadelphia, PA 19107</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="philadelphia" id = "philadelphia"><p class = "buttonText">select</p></button>
                </div>


    </body>

Answer 1

您可以尝试将范围 class 添加到页面正文 <body class="this-page-class">...</body> 并制定仅适用于那些 class 受该 class 范围限制的规则。

Answer 2

我一遍又一遍地读你的问题（downvote phobia），为什么不回到简单的方式。

你说过，只覆盖单个页面，是吗？您是否尝试过使用 functions.php 底部的 wp_enqueue_style 注册您的 自定义单页样式表？像这样：

function your_single_page_stylesheet(){

  if($this_is_your_page_id_or_slug){
    //run
    wp_enqueue_style( 'page-custom', get_template_directory_uri() . '/page-custom.css' );
  }

}
add_action( 'wp_enqueue_scripts', 'your_single_page_stylesheet', 100);

或者，您可以使用 dequeue 函数取消注册您的 parent/default 样式表，

function your_single_page_stylesheet(){

  if($this_isi_your_page_id_or_slug){
    //first dequeue 
    wp_dequeue_style( 'default-stylesheet' );

    //enqueue new style
    wp_enqueue_style( 'page-custom', get_template_directory_uri() . '/page-custom.css' );
  }

}
add_action( 'wp_enqueue_scripts', 'your_single_page_stylesheet', 100);

Answer 3

我认为在 class 中围绕新页面的正文不起作用的原因是因为这只是让它更具体，所以 CSS [=30= 中的所有规则] 仍然适用于 class 中的所有内容。我建议删除它并添加新样式sheet 作为解决方案。

在您的 "header.PHP" 文件中，您可以将 if 语句添加到 link 到 CSS sheet 以获得所需的结果。 If/then 语句也可以。

像这样的东西会为常见的 "page.php" 页面调出一种样式sheet，为 "newpage.php":[=12= 运营的页面调出一种不同的样式sheet ]

<?php
if ( is_page_template('page.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
<?php } ?>
<?php
if ( is_page_template('newpage.php')) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/newpage.css" />
<?php } ?>

这是更详细的博客 post： https://wordpress.org/support/topic/how-to-have-a-separate-stylecss-for-each-page-template

覆盖单个页面的主题 CSS

Override Theme's CSS for a single page

html

css

wordpress

themes

styling