Html 使用CSS更改类背景，但前提是它不在h4之后

我只是想改变第4段的背景颜色。我想不谈第2段，因为它在H4之后。我尝试了not选择器，但似乎无法使逻辑正常工作。不想使用JavaScript、PHP或jQuery。只有纯CSS请

.widget wrap>.widget标题{ 背景颜色：黄色； } .widget标题+.textwidget{ 背景色：红色； } 第1款。

div中的第2段

本款第3段

第2部分第4段

第2分册内第5段

如果.widget wrap的第一个子项仅为h4.widget-title或p.textwidget，即当h4不存在时，只需使用：first child:

.widget wrap>.widget标题{ 背景颜色：黄色； } .widget wrap>.textwidget:第一个孩子{ 背景色：红色； } 第1款。

div中的第2段

本款第3段

第2部分第4段

第2分册内第5段

看看这个

.widget-wrap:nth-child(2) .textwidget {
  background-color: green;
  color: white;
}

为什么在第4段中没有使用不同的类名或id。这将更加简单和清晰。我宁愿建议你使用。 在当前代码中，由于父div和P的类名相同，因此所有的颜色都在更改，而不仅仅是h4。请使用这些。 Html

第二册第4段

第2分册内第5段

CSS:

所以现在所有在类小部件包装中包含类redcolor的元素的背景色都是红色。您可以使用id或任何其他类名。 这将是比使用任何其他javascript等更简单和最好的方法

---

它将添加更多的css行，但不会对它造成任何伤害。

正是我想要的。非常感谢你！有趣的选择，我假设它可能并不总是我答案中的第一个孩子，但上面的评论表明这个假设是错误的。@Harry:很多剥猫皮的方法。我刚刚看到了你的答案。有没有一种方法可以让你改变类widget wrap的css，只要它是由类textwidget而不是类。widget title进行的？@Jonathan Russell:没有，因为这需要某种父选择器。

 .widget-wrap .redcolor {
 background-color: Red !important; /*use important if not works*/
 }