我目前正在做一个基于WordPress的网站(这不是我知道的最有趣的事情)。我希望能够改变用户在网站上的菜单部分的CSS属性的背景颜色。我使用了page-id，然后指定子元素和子元素的子元素，直到到达目标li元素。不工作…所以，如果你知道任何其他的技术，或者如果你看到一个错误在我做的方式，我将很高兴，如果你能告诉我。
这是html，我把id元素加粗，这些元素在
下面的CSS代码中是针对的
<body class="page-template page-template-elementor_header_footer page **page-id-939** wp-custom-logo wp-embed-responsive oceanwp-theme dropdown-mobile has-transparent-header default-breakpoint has-sidebar content-right-sidebar page-header-disabled has-breadcrumbs pagination-center elementor-default elementor-template-full-width elementor-kit-354 elementor-page elementor-page-939" itemscope="itemscope" itemtype="https://schema.org/WebPage">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-dark-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 0.49803921568627" /><feFuncG type="table" tableValues="0 0.49803921568627" /><feFuncB type="table" tableValues="0 0.49803921568627" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-grayscale"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-purple-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.54901960784314 0.98823529411765" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.71764705882353 0.25490196078431" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-blue-red"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 1" /><feFuncG type="table" tableValues="0 0.27843137254902" /><feFuncB type="table" tableValues="0.5921568627451 0.27843137254902" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-midnight"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0 0" /><feFuncG type="table" tableValues="0 0.64705882352941" /><feFuncB type="table" tableValues="0 1" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-magenta-yellow"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.78039215686275 1" /><feFuncG type="table" tableValues="0 0.94901960784314" /><feFuncB type="table" tableValues="0.35294117647059 0.47058823529412" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-purple-green"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.65098039215686 0.40392156862745" /><feFuncG type="table" tableValues="0 1" /><feFuncB type="table" tableValues="0.44705882352941 0.4" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;" ><defs><filter id="wp-duotone-blue-orange"><feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " /><feComponentTransfer color-interpolation-filters="sRGB" ><feFuncR type="table" tableValues="0.098039215686275 1" /><feFuncG type="table" tableValues="0 0.66274509803922" /><feFuncB type="table" tableValues="0.84705882352941 0.41960784313725" /><feFuncA type="table" tableValues="1 1" /></feComponentTransfer><feComposite in2="SourceGraphic" operator="in" /></filter></defs></svg>
<div id="**outer-wrap**" class="site clr">
<a class="skip-link screen-reader-text" href="#main">Skip to content</a>
<div id="**wrap**" class="clr">
<div id="**transparent-header-wrap**" class="clr">
<header id="**site-header**" class="transparent-header has-social clr" data-height="74" itemscope="itemscope" itemtype="https://schema.org/WPHeader" role="banner">
<div id="**site-header-inner**" class="clr container">
<div id="site-logo" class="clr" itemscope itemtype="https://schema.org/Brand" >
<div id="site-logo-inner" class="clr">
<a href="https://beta.in-viva.net/" class="custom-logo-link" rel="home"><img width="140" height="103" src="https://beta.in-viva.net/wp-content/uploads/2021/12/cropped-in_Viva_logo_noir-722x1024-1-e1642607586360.png" class="custom-logo" alt="in-viva" srcset="https://beta.in-viva.net/wp-content/uploads/2021/12/cropped-in_Viva_logo_noir-722x1024-1-e1642607586360.png 1x, https://beta.in-viva.net/wp-content/uploads/2021/12/cropped-in_Viva_logo_noir-722x1024-1-e1642607586360.png 2x" /></a>
</div><!-- #site-logo-inner -->
</div><!-- #site-logo -->
<div class="oceanwp-social-menu clr simple-social">
<div class="social-menu-inner clr">
<ul aria-label="Social links">
<li class="oceanwp-twitter"><a href="#" aria-label="Twitter (opens in a new tab)" target="_blank" rel="noopener noreferrer"><i class=" fab fa-twitter" aria-hidden="true" role="img"></i></a></li><li class="oceanwp-facebook"><a href="#" aria-label="Facebook (opens in a new tab)" target="_blank" rel="noopener noreferrer"><i class=" fab fa-facebook" aria-hidden="true" role="img"></i></a></li><li class="oceanwp-instagram"><a href="#" aria-label="Instagram (opens in a new tab)" target="_blank" rel="noopener noreferrer"><i class=" fab fa-instagram" aria-hidden="true" role="img"></i></a></li>
</ul>
</div>
</div>
<div id="**site-navigation-wrap**" class="clr">
<nav id="**site-navigation**" class="navigation main-navigation clr" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" role="navigation" >
<ul id="**menu-main-menu**" class="main-menu dropdown-menu sf-menu"><li id="**menu-item-522**" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-522"><a href="https://www.beta.in-viva.net/ambition" class="menu-link"><span class="text-wrap">Ambition</span></a></li><li id="menu-item-523" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-523"><a href="https://www.beta.in-viva.net/impact" class="menu-link"><span class="text-wrap">Impact</span></a></li><li id="menu-item-524" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-524"><a href="https://www.beta.in-viva.net/references" class="menu-link"><span class="text-wrap">Références</span></a></li><li id="menu-item-525" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-525"><a href="https://www.beta.in-viva.net/offre" class="menu-link"><span class="text-wrap">Offre</span></a></li><li id="menu-item-526" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-526"><a href="https://www.beta.in-viva.net/equipe" class="menu-link"><span class="text-wrap">Equipe</span></a></li><li id="menu-item-527" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-527"><a href="https://www.beta.in-viva.net/methodologie" class="menu-link"><span class="text-wrap">Méthodologie</span></a></li><li id="menu-item-528" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-528"><a href="https://www.beta.in-viva.net/approche-et-outils" class="menu-link"><span class="text-wrap">Approche et Outils</span></a></li><li id="menu-item-530" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-530"><a href="https://www.beta.in-viva.net/contact" class="menu-link"><span class="text-wrap">Contact</span></a></li></ul>
</nav><!-- #site-navigation -->
</div><!-- #site-navigation-wrap -->
<div class="oceanwp-mobile-menu-icon clr mobile-right">
<a href="#" class="mobile-menu" aria-label="Menu mobile">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="oceanwp-text">Menu</span>
<span class="oceanwp-close-text">Fermer</span>
</a>
</div><!-- #oceanwp-mobile-menu-navbar -->
</div><!-- #site-header-inner -->
<div id="mobile-dropdown" class="clr" >
<nav class="clr has-social" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul id="menu-main-menu-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-522"><a href="https://www.beta.in-viva.net/ambition">Ambition</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-523"><a href="https://www.beta.in-viva.net/impact">Impact</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-524"><a href="https://www.beta.in-viva.net/references">Références</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-525"><a href="https://www.beta.in-viva.net/offre">Offre</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-526"><a href="https://www.beta.in-viva.net/equipe">Equipe</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-527"><a href="https://www.beta.in-viva.net/methodologie">Méthodologie</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-528"><a href="https://www.beta.in-viva.net/approche-et-outils">Approche et Outils</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-530"><a href="https://www.beta.in-viva.net/contact">Contact</a></li>
</ul>
这是我的CSS代码从页面id开始一直到li元素我的目标
/* ambition */
#page-id-939 #outer-wrap #wrap #transparent-header-wrap #site-header #site-header-inner #site-navigation-wrap #site-navigation #menu-main-menu #menu-item-522 {
background-color: black !important;
color: #E0CDA9 !important;
}
通过页面id来改变Wordpress中某个页面的背景颜色。您将执行以下操作。
body.page-id-939 #site-header.transparent-header {
background: red !important;
}
所以我的目标是身体与它的类别page-id-939的页面野心。然后我们可以嵌套到#site-header.transparent-header