Chọn phần tử xuất hiện đầu tiên sau phần tử khác

113

Tôi có mã HTML sau trên một trang:

<h4>Some text</h4>
<p>
Some more text!
</p>

Trong của tôi, .csstôi có bộ chọn sau để tạo kiểu cho h4phần tử. Đoạn mã HTML ở trên chỉ là một phần nhỏ của toàn bộ đoạn mã; có một số divkhác được bao bọc xung quanh thuộc về một hộp bóng:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

Vì vậy, tôi có kiểu chính xác cho h4phần tử của mình , nhưng tôi cũng muốn tạo kiểu cho pthẻ trong HTML của mình.

Điều này có khả thi với CSS-selectors không? Và nếu có, làm thế nào tôi có thể làm điều này?

html css css-selectors

— Rob
nguồn

199

#many .more.selectors h4 + p { ... }

Đây được gọi là bộ chọn anh chị em kế cận .

— Phrogz
nguồn

1

Một giải pháp thay thế là sử dụng JS để tìm các h4phần tử của bạn , đi đến phần tử tiếp theo và thêm một lớp CSS vào đó. Với jQuery, điều này chỉ đơn giản là sẽ$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz

2

Lưu ý rằng điều này chỉ hoạt động trên các phần tử sau phần tử đầu tiên NGAY LẬP TỨC. Nếu bạn muốn có phần tử html tiếp theo thứ hai, bạn có thể xâu chuỗi nó như sau: #selector .original + h4 + p để lấy p theo sau h4 theo sau phần tử .original. Rất hữu ích

— user1610743

30

Đối với ví dụ chữ của bạn, bạn muốn sử dụng bộ chọn liền kề (+).

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

Tuy nhiên, nếu bạn muốn chọn tất cả các đoạn kế tiếp, bạn cần sử dụng bộ chọn anh chị em chung (~).

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

Nó được biết là có lỗi trong IE 7+ .

— Joel Mellon
nguồn

16

Chỉ cần nhấn vào điều này khi cố gắng giải quyết loại vấn đề này của tôi.

Tôi đã thực hiện một bộ chọn xử lý phần tử sau khi là một cái gì đó khác với p.

.here .is.the #selector h4 + * {...}

Hy vọng điều này sẽ giúp bất cứ ai tìm thấy nó :)

— Tom
nguồn

9

Sử dụng các *kết quả phù hợp với bất kỳ phần tử nào như được mô tả trong tiêu đề. Là một lời nhắc nhở hữu ích cho tôi.

— James EJ

1

Đây là câu trả lời duy nhất phù hợp với câu hỏi. Các câu trả lời khác yêu cầu biết trước về loại phần tử đứng trước.

— Hugo Wijdeveld,

0

Đơn giản là những người ăn xin:

Nếu bạn muốn chọn một phần tử ngay sau một phần tử khác, bạn sử dụng +bộ chọn.

Ví dụ:

div + pPhần tử "+" chọn tất cả các <p>phần tử được đặt ngay sau <div>các phần tử

Nếu bạn muốn tìm hiểu thêm về bộ chọn, hãy sử dụng bảng này

— Trooller
nguồn

0

Tôi sử dụng CSS mới nhất và "+" không phù hợp với tôi nên tôi kết thúc với

: con đầu lòng

— VNicholson
nguồn