仅在父母中有另一个孩子时给一个孩子定型

Question

下面是我的HTML结构

let

我正在寻找不使用javascript的问题的解决方案，我知道我可以做到，但是如果有仅CSS的解决方案，我会更愿意。

如果<div class="ContentHeader"> <hgroup> <h1>Title</h1> <h2>Subtitle</h2> </hgroup> </div> 也存在，我只想设置h1的样式。因此，如果没有h2，则没有样式应用于h2。

我尝试过，但是它只设置了h2的样式

h1

任何帮助将不胜感激。

Answer 1

您可以使用此：

.ContentHeader hgroup h1:nth-last-child(2) { /* your code here */}

Answer 2

您可以将两个标题设为相同的元素。

<div class="ContentHeader">
   <hgroup>
      <h1>Title</h1>
      <h1>Subtitle</h1>
   </hgroup>
</div>

那么您只能在CSS中使用子属性

.ContentHeader hgroup h1:only-child {padding-bottom: 10px;}

查看此处：

.ContentHeader hgroup h1:only-child  {
  padding-bottom: 10px;
  color:red;
}

<div class="ContentHeader">
   <hgroup>
      <h1>Title</h1>
      <h2>Subtitle</h2>
   </hgroup>
</div>

<div class="ContentHeader">
   <hgroup>
      <h1>Title</h1>
   </hgroup>
</div>

Answer 3

这在CSS（也不是SASS）中是不可能的。 CSS不回头。可以在另一个元素之后设置一个元素的样式，而不是相反。

通过不给h1设置填充/边距底部，而给h2设置填充/边距顶部，可以达到相同的结果。如果那对您没有帮助，则javascript可能是您唯一的选择。