选择特定元素等元素

之前，我有以下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>

我想选择只h2这直接ul之前。我怎样才能做到这一点？在我的内容中还有更多uls以及更多h2s，所以解决方案应该是通用的。

来源

2012-04-19 user1292810

据我所知，CSS不提供任何selectors将目标之前选择器。你可以选择它作为一个h2，它是在p（p + h2）之后？

h2 { 
    color: #1a1a1a; 
} 

p + h2 { 
    color: #0cc; 
}

Example on JSFiddle

正如你所看到的，这可能是，如果你依靠CSS，你可以用最好的选择，但是你可以很容易地只需要添加一个类各h2这是一个ul前。这将避免在另一个h2和段落之前有段落段的情况。

你可以做到这一点使用jQuery：

.highlight { 
    color: #0cc; 
} 

$('ul').prev('h2').addClass('highlight')

Example on JSFiddle

这将选择每ul，然后选择h2也就是在它之前，最后才加入.highlight类吧。

来源

2012-04-19 09:42:38 djlumley

感谢您的回答。我知道jQuery解决方案，但我想知道它是否可以在纯CSS中完成。 – user1292810 2012-04-23 21:52:31

我想在我的删除链接，选择第一锚，我不能让'里面了'链接andother'了'链接，像这样'file.exe ✖'唯一的解决办法是workes使用jQuery， – 2016-02-19 12:50:24

-3

嘿，我想你想的这样

的CSS

div h2{ 
font-weight:bold; 
    color:red; 
} 



ul ~ h2{ 
color:green; 
}

现场演示 http://jsfiddle.net/rohitazad/JxST8/4/

来源

2012-04-19 09:42:37

这就是'h2'''''''之后'ul'，而不是之前:) – djlumley 2012-04-19 09:43:26

你可以像你一样创建h2样式，现在在ul之前创建样式为简单的.......... – 2012-04-19 09:47:45

由于djlumley说http://jsfiddle.net/JxST8/5/。 – kubedan 2012-04-19 09:55:11

有了这个，你可以风格只是第一个h2元素

h2:first-child { color:red; }

的浏览器支持阅读这里： http://www.quirksmode.org/css/contents.html#t17

来源

2012-04-19 09:43:05 alphanyx

你应该使用这个

div h2::nth-child(2) { 

}

来源

2012-04-19 09:44:06

旧的浏览器不支持这个.. speciale alphanyx 2012-04-19 09:45:06

在我的内容有更多的'h2s'等等'uls'所以解决方案应该是更普遍的。 – user1292810 2012-04-19 09:48:27

-3

您可以使用一般的兄弟姐妹选择器~。

对于您的情况，您可以使用h2~ul，它将应用于同一父级中的ul之前的h2。

来源

2012-04-19 09:44:29 davidaam

不幸的是，它不会。这将适用于所有'h2' _after_'ul'相同的父里面。 – djlumley 2012-04-19 22:46:33

选择特定元素等元素

回答

相关问题