CSS 在其他元素之前选择特定元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10225364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select specific element before other element
提问by user1292810
I have following HTML structure:
我有以下 HTML 结构：
<div>
<h2>Candy jelly-o jelly beans gummies lollipop</h2>
<p>
Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake.
</p>
<p>
Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu.
</p>
<h2>Dessert pie cake</h2>
<ul>
<li>liquorice</li>
<li>powder</li>
<li>dessert</li>
</ul>
<h2>Chupa chups sweet dragée</h2>
<p>
Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. Soufflé cake toffee.
</p>
</div>
I would like to choose only that h2which is directly before ul. How can I do this? In my content there are many more ulsand many more h2sso the solution should be universal.
我只想选择h2直接在ul. 我怎样才能做到这一点？在我的内容中有越来越uls多的内容，h2s因此解决方案应该是通用的。
采纳答案by djlumley
As far as I know, CSS doesn't offer any selectorswhich will target beforea selector. Could you select it as an h2which is directly after a p(p + h2)?
据我所知，CSS不提供任何选择，这将针对前一个选择。你能把它选为h2直接在p( p + h2)之后的an吗？
h2 {
color: #1a1a1a;
}
p + h2 {
color: #0cc;
}
As you can see, this is probably the best selector you can use if you're relying on CSS, although you could easily just add a class to each h2that is before a ul. That would avoid the case where you have a paragraph section before another h2and paragraph section.
正如你所看到的，这可能是，如果你依靠CSS就可以使用，但你可以很容易地只需添加一个类每一个最好的选择h2是前ul。这将避免您在另一个段落部分之前有一个段落部分的情况h2。
You could do this using jQuery:
你可以使用 jQuery 做到这一点：
.highlight {
color: #0cc;
}
$('ul').prev('h2').addClass('highlight')
This selects every ul, then selects the h2that is before it, before finally adding the .highlightclass to it.
这将选择 every ul，然后选择h2它之前的 ，最后将.highlight类添加到它之前。
回答by alphanyx
with this you can style just the first h2 element
有了这个，你可以只设置第一个 h2 元素的样式
h2:first-child { color:red;?}
for browser support read here: http://www.quirksmode.org/css/contents.html#t17
有关浏览器支持，请阅读此处：http: //www.quirksmode.org/css/contents.html#t17
回答by Mateusz Rogulski
You should use this
你应该用这个
div h2::nth-child(2) {
}
回答by Nicolas Soudet
The rule h2~ul will not select h2 but ul. So you will not be able to apply any style to h2.
规则 h2~ul 不会选择 h2 而是选择 ul。因此，您将无法对 h2 应用任何样式。
I have the same problem with panel location. I have a element that is followed by a . And in this case I would like to reduce the height or the min-height (depends on the panels are fixed or not) of the main panel by style application.
我对面板位置有同样的问题。我有一个后跟一个 . 在这种情况下，我想通过样式应用程序降低主面板的高度或最小高度（取决于面板是否固定）。
In case of fixed footer, because I can declare the element before the main in my html file (it will be relocated by top/left properties) I can use the ~ selector like this: footer ~ main. But in case of non fixed footer, the only way I found is to add a class at document.ready() call.
在固定页脚的情况下，因为我可以在我的 html 文件中的 main 之前声明元素（它将被顶部/左侧属性重新定位）我可以像这样使用 ~ 选择器：footer ~ main。但是在非固定页脚的情况下，我发现的唯一方法是在 document.ready() 调用中添加一个类。
回答by davidaam
You can use the general sibling selector ~.
您可以使用一般的兄弟选择器~。
In your case, you can use h2~ulthat will apply to the h2 before ulinside the same parent.
在您的情况下，您可以使用h2~ul将应用于 h2 之前ul的同一个父级。
