CSS 如何更改wordpress中只有一页的css?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23363333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:21:08  来源:igfitidea点击:

How do I change the css of only one page in wordpress?

csswordpress

提问by Adamdadam

I need to change the css of the home page only, I have googled and a lot of the suggestions were to add the page id as part of the css selector. But when I try it, it doesn't seem to work? I want to change the class ".contentclass" and the pages id is "599" so here's what I've tried:

我只需要更改主页的 css,我用谷歌搜索,很多建议是将页面 id 添加为 css 选择器的一部分。但是当我尝试它时,它似乎不起作用?我想更改类“.contentclass”并且页面 ID 为“599”,所以这是我尝试过的:

.post-id-599 .contentclass {}
.page-id-599 .contentclass {}
.body-id-599 .contentclass {}

none of them seems to be working...

他们似乎都没有工作......

Link to the webpage I'm working on: Link

链接到我正在处理的网页:链接

采纳答案by Chankey Pathak

If your theme uses body_class()in the body tag, you will have a specific css class for the front page (.home), which you could use in the stylesheet;

如果您的主题在 body 标签中使用body_class(),您将有一个用于首页 ( .home)的特定 css 类,您可以在样式表中使用它;

Example (might be different for your theme):

示例(可能因您的主题而异):

.home #content .entry { color: #123edf; }

.home #content .entry { color: #123edf; }

to overwerite the genral stylesheet style.css, you could use a conditional statement in header.php to link a specific stylesheet for the front page:

要覆盖通用样式表 style.css,您可以使用 header.php 中的条件语句来链接首页的特定样式表:

Example:

例子:

<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } ?>

the code needs to be after the link to the general stylesheet.

代码需要在通用样式表的链接之后。

(instead of is_home()you might need to use is_front_page())

(而不是is_home()您可能需要使用is_front_page()

Check: Conditional_Tagsand get_stylesheet_directory_uri

检查:Conditional_Tagsget_stylesheet_directory_uri

-- alternative, to load a different stylesheet instead of the general stylesheet, use the conditional statement with an else: (this code would replace the link of the general stylesheet)

-- 替代,要加载不同的样式表而不是通用样式表,请使用带有else:的条件语句(此代码将替换通用样式表的链接)

Example:

例子:

<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php } ?>

回答by StandardSpace

Try using the right click "inspect element" or equivalent for your browser.

尝试使用右键单击“检查元素”或浏览器的等效项。

When I look at your site I see something like this

当我查看您的网站时,我看到了类似的内容

enter image description here

在此处输入图片说明

<body class="page page-id-624 woocommerce-cart woocommerce-page boxed varukorg" style="">

So for example for this page: http://witdesign.se/wp/varukorgyou would use

因此,例如对于此页面: 您将使用http://witdesign.se/wp/varukorg

body.post-id-624 .contentclass {}

Any styles within the braces will be applicable to the pages with a body class of post-id-668

大括号内的任何样式都适用于具有 post-id-668 主体类的页面

To be sure, you will need to check what renders in your browser using an inspector.

可以肯定的是,您需要使用检查器检查浏览器中呈现的内容。