Question

包含在父元素（例如div，ul）中，我想设置单个段落的颜色，然后让所有后续段落接收相同的颜色-直到出现新的段落类别以更改颜色。我试图实现选择器以完成工作，但结果混合起来最终使我感到困惑。建议将不胜感激。谢谢。

<html>

<head>
<style>
p.r { color: red; }
p.g { color: green; }
</style>
</head>

<body>
<p class="r">RED
<p class="g">GREEN
<p class="r">RED
    <p>red
<p class="g">GREEN
    <p>green
<p class="r">RED
    <p>red
    <p>red
<p class="g">GREEN
    <p>green
    <p>green
</body>

</html>

Answer 1

在父类上设置样式。

HTML

<div class="parentdiv">
    <p>this will appear blue</p>
    <p>this will also appear blue</p>
    <p class="green">this will appear green</p>
</div>

CSS

.parentdiv p {
    color: blue;    
}
.parentdiv .green {
    color: green;
}

Answer 2

这不是一个可扩展性很强的解决方案，但是一个选择是对相邻的连续p:not([class]) + <class>元素重复相邻的同级组合器和<classless>：

p.r,
p.r+p:not([class]),
p.r+p:not([class])+p:not([class])
{
  color: red;
}

p.g,
p.g+p:not([class]),
p.g+p:not([class])+p:not([class])
{
  color: green;
}

<p class="r">RED</p>
<p class="g">GREEN</p>
<p class="r">RED</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p class="r">RED</p>
<p>red</p>
<p>red</p>
<p class="g">GREEN</p>
<p>green</p>
<p>green</p>

连续段落的CSS颜色

2 个答案: