如果有多个标题，如何仅对第一个标题应用样式？

Question

I may have two types of html...

One:

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

二：

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

所有的样式都相同，只是给第一个 h4 标签的底部添加边框，但仅当它包含两个 h4 标签时才这样做。如何在不更改 HTML 的情况下实现？

- Bhojendra Rauniyar

---

不可能仅使用CSS实现。 - Richa

@era 当然，但是如果你将border-bottom改为border-top，你可能会以某种方式作弊 :) - Fabrizio Calderan

@Fabrizio：非常正确，虽然他可以使用border-top来解决他目前的问题，但这不是最优化的解决方案。希望你知道这种方法的缺点 :) - Richa

@FabrizioCalderan - 你看到我的回答了吗？实际上是可以的。 - Danield

@Danield，只要在第一个段落之后不在父节点内添加新节点，你的答案就是有效的。确实，在特定的例子中它是可行的，但它并不总是有效的。 - Fabrizio Calderan

@FabrizioCalderan - 我编辑了我的答案以解决那个问题，谢谢。 - Danield

Answer 1

你可以结合 :first-child、:not() 和 :only-of-type 伪类来实现这一点。

这里是内容：

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

工作演示。

这个选择器表示父元素的第一个子元素，而它不是父元素的子树中唯一的类型元素。

来自MDN：

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

让我们疯狂起来！

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

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

已更新的演示.

关于:first-of-type和:first-child的更多细节，您可以在这里查看我的答案。

- Hashem Qolami

---

+1 虽然仅仅是用 :first-of-type 替换 :first-child 对我来说并不算特别疯狂 ;) - BoltClock

@BoltClock 哈哈，是的，我也这么认为。我只是想让它变得有趣。请随意更改为适当的标题 :) 我会非常感激。 - Hashem Qolami

Answer 2

如果父元素包含两个相邻的标题，您需要为第一个h4样式化border-bottom

然后，您可以为第二个h4样式化border-top以获得相同的效果

h4 + h4 {
   border-top: ...
}

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

- Fabrizio Calderan

Answer 3

这就是你需要的：

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

弦乐器

请注意，我并没有解释这段文本中的HTML代码。

- Danield

---

但如果您在第一个示例中添加一个段落，则标题将变为绿色。 - Fabrizio Calderan

@FabrizioCalderan - 你是什么意思？我在这里添加了一个段落http://jsfiddle.net/danield770/dLny6/2/，但它不是绿色的。 - Danield

在Firefox 27和Chrome上，我看到第一个标题是绿色的。 - Fabrizio Calderan

@FabrizioCalderan - 我使用了nth-last-of-type编辑了我的答案。 - Danield

Answer 4

你可以使用 First-child 类。

它可能看起来像这样：

div h4:first-child{
CODE HERE
}

- Carsten Løvbo Andersen

---

这将应用于两个示例中的样式。 - Fabrizio Calderan

Answer 5

我认为如果可能的话，最好对第二个h4进行样式设置，因为您无法使用CSS判断

中是否有一个或两个h4。

您可以使用nth-child来实现此目的。

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

小提琴

- Colin Bacon