選擇特定元素等元素

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

選擇特定元素等元素

回答

相關問題