2009-07-15 25 views
65

này sẽ chọn tất cả <B> thẻ trực tiếp trước bởi <A> tags:Selector cho một thẻ trực tiếp theo sau một thẻ

A+B { 
    /* styling */ 
} 

chọn cho tất cả <A> thẻ trực tiếp sau bởi <B> thẻ là gì?

Dưới đây là mẫu HTML phù hợp câu hỏi của tôi:

<a>some text</a> 
<b>some text</b> 
+3

Pease cho chúng ta một ví dụ DOM sao 'A' và ' B' có liên quan. – Gumbo

+2

Chúng có liên quan ở chỗ chúng là anh chị em, và B được theo sau bởi A. OP muốn chọn tất cả 'b' được theo sau bởi' a ', tương tự như' a + b', nơi bạn có thể chọn tất cả ' b' được bắt đầu trực tiếp bởi 'a'. – Anthony

+0

2,5 năm sau, có bất kỳ cập nhật nào cho câu trả lời này không? Tôi cũng đang tìm cách nhắm mục tiêu theo sau là b. – chovy

Trả lời

21

Bạn không thể trong css.

Chỉnh sửa: Để hữu ích hơn một chút, nếu bạn sử dụng jQuery ví dụ (thư viện JavaScript), bạn có thể sử dụng .prev().

+0

nó seams giải pháp duy nhất của việc sử dụng JavaScript –

+2

Tôi nghĩ như vậy, trừ khi bạn có thể thay đổi thứ tự của A và B ... – jeroen

+2

Cảm ơn jeroen! Điều đó đã khắc phục được sự cố của tôi. Vì "A" của tôi nổi bên trái và "B" nổi bên phải, nó không quan trọng thứ tự tôi đặt đánh dấu. – BobRodes

-9

Bạn có thể, nhưng sự hỗ trợ vẫn còn lỗi. Tên của đó là anh chị em chọn liền kề

http://reference.sitepoint.com/css/adjacentsiblingselector

+0

Đó là để chọn một phần tử B được _preceded_ bởi một phần tử A. Nhưng câu hỏi là "bộ chọn cho chọn một phần tử mà _directly follow_ bởi phần tử B ", tức là cách khác xung quanh. – VolkerK

+0

Anh ta đã biết điều đó, nhưng anh ta cần sự nghịch đảo. Câu trả lời dưới đây là chính xác. – Dykam

+0

Đó là bộ chọn mà OP có.Anh ta muốn người ta chọn một yếu tố dựa trên anh chị em tiếp theo của mình, không phải là anh chị em trước đó của nó. – Quentin

50

Bạn có nghĩa là để tạo kiểu A cho rằng nó có một yếu tố B trực tiếp bên trong hoặc sau? Như thế này:

<A> 
    <B> 
    </B> 
</A> 

// OR 

<A> 
</A> 
<B> 
</B> 

Bạn không thể làm một điều như vậy trong CSS (chưa). Eric Meyer nói rằng loại bộ chọn này đã được thảo luận khá nhiều lần trong danh sách gửi thư CSS và không thể thực hiện được. Dave Hyatt, một trong những nhà phát triển WebKit cốt lõi, bình luận với một lời giải thích tốt về lý do tại sao nó không thể được thực hiện.

Kiểm tra: Shaun Inman's blog postcomment by Eric Meyer.
David Hyatt weighs in cũng vậy.

+0

tôi có nghĩa là thứ hai, tôi hiểu vấn đề cảm ơn nick :) –

7

Bạn CHỈ có thể thực hiện cuộc trò chuyện: Thao tác này sẽ chọn tất cả các thẻ đứng trước thẻ.

Điều này tương đương về mặt logic theo yêu cầu của bạn.

Tôi thường sử dụng này để tạo kiểu một dãy nhiều hộp kiểm có nhãn

CSS:

label+input { 
    margin-left: 4px; 
} 

DOM:

<input id="a" name="a" type="checkbox"/><label for="a">...</label> 
<input id="b" name="b" type="checkbox"/><label for="b">...</label> 
<input id="c" name="c" type="checkbox"/><label for="c">...</label> 
Các vấn đề liên quan