html – 如何在css中出现h2元素之后设置每个奇数p元素的样式?

前端之家收集整理的这篇文章主要介绍了html – 如何在css中出现h2元素之后设置每个奇数p元素的样式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一个混乱的HTML,我无法改变它,它看起来像这样:

现在我想在h2元素更大胆之后做出每一个奇怪的p.
所以我希望这是大胆的:

This is a message

Two cat

Dog 0

Dog 2

如何在CSS中编写选择器(没有jQuery,没有JS可用)来使这些文本变粗?

最佳答案
你可以使用css~选择器,然后是nth-of-type(或者nth-child)选择器.您可以在MDN:General Sibling Selector:nth-of-type上阅读有关这些选择器的更多信息.

以下是如何实现您想要的.基本上,你选择所有奇数< p> < h2>元素是兄弟姐妹(即后来的).标签.

h2 ~ p:nth-of-type(odd) {
  font-weight: 600;
}

猜你在找的HTML相关文章