Chọn yếu tố cụ thể trước khi yếu tố khác

Question

Tôi đã theo cấu trúc 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> 

Tôi muốn chọn duy nhất mà h2 mà là trực tiếp trước khi ul. Tôi có thể làm cái này như thế nào? Trong nội dung của tôi có nhiều hơn uls và nhiều hơn nữa h2s vì vậy giải pháp nên phổ biến.

Answer 1

Theo như tôi biết, CSS không cung cấp bất kỳ selectors mà sẽ nhắm mục tiêu trước bộ chọn. Bạn có thể chọn nó làm h2 trực tiếp sau p (p + h2) không?

h2 { 
    color: #1a1a1a; 
} 

p + h2 { 
    color: #0cc; 
} 

Example on JSFiddle

Như bạn có thể thấy, đây có lẽ là chọn tốt nhất mà bạn có thể sử dụng nếu bạn đang dựa vào CSS, mặc dù bạn có thể dễ dàng chỉ cần thêm một lớp cho mỗi h2 đó là trước khi một ul . Điều đó sẽ tránh trường hợp bạn có một đoạn đoạn trước một phần h2 và đoạn khác.

Bạn có thể làm điều này bằng jQuery:

.highlight { 
    color: #0cc; 
} 

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

Example on JSFiddle

này sẽ chọn tất cả các ul, sau đó chọn h2 đó là trước đó, trước khi cuối cùng thêm lớp .highlight với nó.

Answer 2

Hey tôi nghĩ rằng bạn muốn là như

Css này

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



ul ~ h2{ 
color:green; 
} 

sống bản demo http://jsfiddle.net/rohitazad/JxST8/4/

Answer 3

với điều này bạn có thể tạo kiểu chỉ là yếu tố h2 đầu tiên

h2:first-child { color:red; } 

cho trình duyệt hỗ trợ đọc ở đây: http://www.quirksmode.org/css/contents.html#t17

Answer 4

Bạn nên sử dụng này

div h2::nth-child(2) { 

} 

Answer 5

Bạn có thể sử dụng anh chị em chung bộ chọn ~.

Trong trường hợp của bạn, bạn có thể sử dụng h2~ul sẽ áp dụng cho h2 trước ul bên trong cùng một cấp độ gốc.