CSS一般兄弟选择特异性

为一个文件：CSS一般兄弟选择特异性

<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比更接近兄弟10。但是，在我的测试中，结果是第2段和第3段的样式相同。

两个问题：

请问CSS选择器的规格其实某处指定此行为？ css spec on the General sibling selector似乎可以在这里解释。

我怎样才能达到第1段和第3段的样式相同的预期结果？我不能添加类或任何属性的HTML，我只能控制CSS。

来源

2014-12-11 Matt Bierner

关于[计算选择特异性]（http://www.w3.org/TR/css3-selectors/#specificity）一节从未提及组合器，所以假设或甚至推断组合器对于选择特异性。 – BoltClock 2014-12-11 05:31:11

至于达到预期的结果，Musa是正确的：在给定文档结构的情况下，您将无法使用纯CSS完成此操作。类似问题：http://stackoverflow.com/questions/10427998/targeting-more-than-one-following-element-with-elementelement http://stackoverflow.com/questions/13330757/target-all-general-siblings-相同类型之前的下一个出现 – BoltClock 2014-12-11 05:32:25

这两个选择器具有相同的特征，导致h2 ~ p优先的原因在于它是在后面定义的，因此级联在h1 ~ p之上。兄弟姐妹之间的距离是多么的无关紧要。
对于您想要的行为，您可以使用adjacent sibling selector+。

如果你改变了h1 ~ p后，你会看到它需要precidience

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>

来源

2014-12-11 04:21:48 Musa

您刚刚击败了我：p – Bill 2014-12-11 04:22:38

您的订购说明很有意义（但仍不是我的预期）。但是，您的邻居兄弟选择器解决方案不起作用，或者说它的工作原理足以解决最初发布的非常有限的示例问题。它不适用于每个部分的多个元素，但我更新了jsfiddle和示例。 – 2014-12-11 04:28:13

@MattBierner我想不出解决你的问题的一般目的，我只会用'h1 + p，h1 + p + p，h1 ...'来表示可能有多少'p' – Musa 2014-12-11 04:39:54

-1

您可以使用此代码：

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

来源

2014-12-11 04:24:55

你的代码有h1 CSS标签在第一行，所以它会寻找全部为p标签，该标签是该h1标签的兄弟，并将红色应用于所有p标签。在下一行它会找到两个p标签，它们在第一个'h1 tag and those two p`标签将被应用第二个css。这是一个激动人心的问题，你有。 现在解决问题的方法是CSS3adjecent siblings selector

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

来源

2014-12-11 04:30:51 Innodel

查看更新每个部分有很多元素的例子，为什么相邻选择器不适用于更一般的情况：http://jsfiddle.net/4ks7j938/10/ – 2014-12-11 04:35:33

什么棘手的问题！如果您有权限添加一些jQuery，则可能会使用某些traversing methods。下面的工作，但你需要使它适合你的具体需求，所以另一种方法可能会更好。

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

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

updated fiddle

来源

2014-12-11 04:51:30 lukeocom

问题是CSS选择器和特异性的基本误解。你的答案是“让它使用JavaScript”，而不是试图真正理解CSS中发生了什么。 – Zaqx 2014-12-11 05:04:22

其他一些答案已经提供了解如何解决这个问题的CSS。我发现这个jQuery方法实际上解决了这个问题，并且建议可能还有其他的选择。我不是说要拧它，我只是提供另一种可能的解决方案。搭建一座桥梁。 – lukeocom 2014-12-11 06:44:23

穆萨似乎是正确的，你不能只使用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/

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

来源

2014-12-11 06:20:01

CSS一般兄弟选择特异性

回答

相关问题