我已经浏览了数百个关于教程，问题论坛，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>
答案 0 :(得分：1)
您可以尝试将范围类添加到页面正文<body class="this-page-class">...</body>中，并且规则仅适用于该类范围内的那些类。
答案 1 :(得分：0)
我一遍又一遍地阅读你的问题（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函数取消注册您的父/默认样式表，
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);
答案 2 :(得分：0)
我认为围绕一个类中新页面的主体不起作用的原因是因为这只是使它更具体，因此CSS表中的所有规则仍然适用于该类中的所有内容。我建议删除它并添加一个新的样式表作为解决方案。
在“header.PHP”文件中，您可以将if语句添加到CSS表的链接以获得所需的结果。 if / then语句也可以。
这样的内容会为常见的“page.php”页面调出一个样式表，为“newpage.php”操作的页面调出不同的样式表：
<?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 } ?>
以下是更详细的博客文章： https://wordpress.org/support/topic/how-to-have-a-separate-stylecss-for-each-page-template