CSS 通用同级选择器特性

Question

对于文档：

<h1>Section 1</h1>
<p>I came after a h1 and should be red.</p>
<p>I came after a h1 and should be red.</p>

<h2>Section 2</h2>
<p>I came after a h2 and should be green.</p>
<p>I came after a h2 and should be green.</p>

<h1>Section 3</h1>
<p>I should be the same color as the section one text?</p>
<p>I should be the same color as the section one text?</p>

我试着给它设计样式：

h1 ~ p {
    color: red;
}

h2 ~ p {
    color: green;
} 

http://jsfiddle.net/4ks7j938/7/

我预计第 1 段和第 3 段的样式相同，第三段匹配更具体的 h1 ~ p 选择器，因为 h1 比 h2 更接近同级。但是，在我的测试中，结果是第 2 段和第 3 段的样式相同。

两个问题：

css 选择器规范是否真的在某处指定了这种行为？ css spec on the General sibling selector 似乎可以在这里解释。

如何实现第 1 段和第 3 段的样式相同的预期结果？我不能向 html 添加类或任何属性，我只能控制 css。

Answer 1

两个选择器具有相同的特异性，导致h2 ~ p 优先的原因是它在之后定义，因此级联于h1 ~ p。兄弟姐妹的亲密程度无关紧要。
对于您想要的行为，您可以使用 adjacent sibling selector +。

如果你改变h1 ~ p，你会看到它需要精确

h2 ~ p {
    color: green;
}

h1 ~ p {
    color: red;
}

<h1>Section 1</h1>
<p>I came after a h1 and should be red.</p>
    
<h2>Section 2</h2>
<p>I came after a h2 and should be green.</p>

<h1>Section 3</h1>
<p>I should be the same color as the section one text?</p>

Answer 2

Musa 似乎是正确的，在一般情况下仅使用 CSS 无法解决此问题。

但这是三个部分的一种解决方案：

h1 ~ p,
h1 ~ h1 ~ p {
    color: red;
}

h2 ~ p {
    color: green;
}

http://jsfiddle.net/4ks7j938/12/

或者，根据交织的数量，这也可能起作用，并且可能扩展到更多部分：

h1 ~ p,
h1 ~ h2 ~ h1 ~ p,
h1 ~ h2 ~ h1 ~ h2 ~ h1 ~ p
/* add more as needed */ {
    color: red;
}

h2 ~ p,
h2 ~ h1 ~ h2 ~ p,
h2 ~ h1 ~ h2 ~ h1 ~ h2  ~ p
/* add more as needed */ {
    color: green;
}

http://jsfiddle.net/4ks7j938/15/

然而，这两种方法都不是特别可扩展的。

Answer 3

多么棘手的问题！ 如果您有权添加一些 jQuery，那么一些 traversing methods 可能会有用。 以下方法可行，但您需要使其适合您的特定需求，因此另一种方法可能会更好。

$( "h1" )
  .nextUntil( "h2" )
    .css( "color", "red" );

$( "h2" )
  .nextUntil("h1")
    .css( "color", "green" );

updated fiddle

Answer 4

您的代码在第一行有h1 标签的css，因此它将查找所有ptag，这是h1 标签的兄弟，并将红色应用于所有p 标签。在下一行，它将找到两个位于第一个'h1tag and those twop`标签下方的p标签将应用于第二个css。这是您遇到的一个令人兴奋的问题。 现在你的问题的解决方案是 css3 adjecent siblings selector

看看这个小提琴：http://jsfiddle.net/4ks7j938/9/

Answer 5

您可以使用此代码：

h1 ~ p {
    color: red; 
}
h2+p{
    color: green; 
}