Question

我有这个：

<section class="menu-items">
<header class="menu-group-header">
  <h1 class="menu-group-title">TITLE</h1>
</header>
<article id="post-315" class="post-315 nova_menu_item type-nova_menu_item status-publish hentry nova_menu-asd123">
	<header class="entry-header">
		<h3 class="entry-title">asd</h3>	
  </header>
	<div class="entry-content">
	sth
	</div>
	<span class="menu-price">100</span>
</article>
</section>

我需要更改TITLE（ h1 块）的字体。由于我只发布了部分HTML代码，因此我必须使用＃post-315 作为CSS中的参考（我在wordpress中添加自定义CSS以覆盖主题的原始内容）。下面的代码不起作用是否有原因？

#post-315 ~ header > h1 {background: #5C5C5C; 
font-size: 200%; 
font-family: arial;}

我似乎无法像here那样部署它。

Answer 1

因为在CSS中你无法返回DOM树。您的header位于#post-315之前，因此您可以从那里获取它。兄弟选择器~在您的第一个选择器的同一级别上选择与您的选择匹配的下一个元素，但它不能使用之前的。

<强>更新

无法在CSS中选择以前的兄弟。你可以在这种情况下使用javascript，或者只是指向父元素中的那个元素（这不是你想要的那样）。由于您使用的是WordPress，因此您可以使用钩子为包含ID为315的de post添加style标记：

function custom_style_for_315()
{
    if ( get_the_ID() == 315 )
    {
        ?>
            <style>
                .menu-group-title {
                    background: #5C5C5C; 
                    font-size: 200%; 
                    font-family: arial;
                }
            </style>
        <?php
    }
}
add_action('wp_head', 'custom_style_for_315');

您可以将这些行放在当前主题的functions.php文件中。如果您导航的当前页面是ID = 315的帖子，这些样式将添加到您的文档<head>中。这不是最优雅的方式，但它应该有效。

Answer 2

兄弟姐妹是一个层次的元素，例如：

<body>
   <div class="section-1">
     <h1>Hello there</h1>
   </div>
   <div class="section-2"></div>
<body>

在此示例中，siblins为section-1和section-2，但h1是section-1的子元素。因此section-1是h1元素的父级。

你需要的是获取h1这是标题的子元素：

.menu-group-header > h1 {...}

CSS - 兄弟姐妹的孩子

2 个答案:

<强>更新