如果第一个标题不止一个，如何应用样式？

Question

我可能有两种类型的HTML ...

一：

<div>
<h4></h4><!--not to this-->
<p></p>
</div>

二：

<div>
<h4></h4><!--this should be styled--->
<h4></h4>
<p></p>
</div>

只有在示例中包含两个h4标记时，所有样式都是相同的，但只与第一个h4标记的h4边界相同。怎么做而不改变html？

Answer 1

您可以合并:first-child，:not()和:only-of-type伪类来实现这一目标。

你走了：

h4:first-child:not(:only-of-type) {
    background-color: gold;
}

<强> WORKING DEMO

此选择器代表<h4>元素，它是其父项的第一个孩子，而 <唯一 TYPE 父母子树中的元素。

来自MDN：

  

:only-of-type CSS伪类表示具有的任何元素   没有给定类型的兄弟姐妹。

我们去疯狂！

如果<h4>元素不是其父项的第一个孩子，我们可以选择第一个<h4>元素并使用:first-of-type达到相同的效果伪类如下：

h4:first-of-type:not(:only-of-type) {
  background-color: gold;
}

<强> UPDATED DEMO

有关:first-of-type vs :first-child的详细信息，请在此处提及my answer。

Answer 2

只有当父级包含两个相邻标题时，您才需要设置第一个border-bottom的{​​{1}}样式

然后您可以设置第二个h4的{​​{1}}样式并获得相同的效果

border-top

如果只有一个标题，则不会应用任何样式。如果您有两个或更多相邻标题，则会应用它们之间的边框

Answer 3

这就是你需要的：

h4:first-child:nth-last-of-type(n+2)
{
    color:green;
}

<强> FIDDLE

Answer 4

您可以使用First-child类。

我看起来像这样：

div h4:first-child{
CODE HERE
}

Answer 5

我认为如果可能的话，你最好设置第二个h4，因为你无法用CSS判断div中是否有一个或两个h4。

您可以使用nth-child

执行此操作

div h4:nth-child(2) {
    // your styles.
}

Fiddle