Cú pháp cho bộ chọn trong CSS cho phần tử tiếp theo là gì?

200

Nếu tôi có một thẻ tiêu đề <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

và sau đó tôi có một đoạn <p>stuff here</p>.

Làm cách nào tôi có thể đảm bảo sử dụng CSS mà mọi <p>thẻ theo sau h1.hc-reformđể sử dụng:clear:both;

đó sẽ là:

h1.hc-reform > p{
     clear:both;
}

vì một số lý do mà nó không hoạt động.

— tony noriega
nguồn

397

Đây được gọi là bộ chọn anh chị em liền kề và được biểu thị bằng dấu cộng ...

h1.hc-reform + p {
  clear:both;
}

Lưu ý: điều này không được hỗ trợ trong IE6 trở lên.

— Josh Stodola
nguồn

4

Điều đó sẽ chỉ chọn những pgì đến ngay sau đó h1.hc-reform. Sau đó, một lần nữa, nó có thể là người duy nhất clear: bothcần phải áp dụng cho nó để hoạt động vì nó chỉ đơn giản là xóa h1float, vì vậy nó vẫn là một câu trả lời hợp lệ.

— BoltClock

@BoltClock Có bạn đúng, tôi đọc sai thông số và xóa nhận xét đó vì nó sai. Bộ chọn này sẽ chỉ phù hợp với pcái được đặt trước ngay lập tức h1.hc-reform(với cùng một phần tử cha).

— Josh Stodola

4

wow không biết về bộ chọn anh chị em liền kề. Rất vui, cảm ơn!

— lý thuyết

1

~ là một lựa chọn tốt hơn trong trường hợp này. Dưới đây là một công tác JSfiddle jsfiddle.net/dZAtt

— ProblemsOfSumit

đáng lưu ý rằng điều này không hoạt động nếu phần tử đầu tiên có bất kỳ con nào

— 72GM

60

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

h1.hc-reform ~ p{
     clear:both;
}

Điều này chọn tất cả các pyếu tố đến sau .hc-reform, không chỉ là yếu tố đầu tiên.

— Stephan Muller
nguồn

Các lỗi IE trong liên kết đầu tiên là công cụ trường hợp cạnh tối nghĩa, đó có thể là lý do tại sao quirksmode bỏ qua chúng.

— Rìu.

14

không >là một bộ chọn con.

người bạn muốn là +

vậy hãy thử h1.hc-reform + p

hỗ trợ trình duyệt không tốt

— Moin Zaman
nguồn

2020: Hỗ trợ trình duyệt là tuyệt vời sau mười năm. Chỉ là một thông tin cho người mới CSS.

— AlexioVay

8

Đây >là một bộ chọn con . Vì vậy, nếu HTML của bạn trông như thế này:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... Sau đó, đó là vé của bạn.

Nhưng nếu HTML của bạn trông như thế này:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Sau đó, bạn muốn bộ chọn liền kề :

h1.hc-reform + p{
     clear:both;
}

— Richard JP Le Guen
nguồn

4

Tôi chắc chắn hy vọng anh ấy đã không làm tổ bên trong h1 .. Ngoài ra, liền kề chỉ chọn p đầu tiên.

— Stephan Muller

2

Không chính xác. Có h1.hc-reform > pnghĩa là "bất kỳ pchính xác một cấp độ bên dưới h1.hc-reform".

Những gì bạn muốn là h1.hc-reform + p. Tất nhiên, điều đó có thể gây ra một số vấn đề trong các phiên bản Internet Explorer cũ hơn; nếu bạn muốn làm cho trang tương thích với các IE cũ hơn, bạn sẽ bị mắc kẹt khi thêm một lớp thủ công vào các đoạn văn hoặc sử dụng một số JavaScript (ví dụ, trong jQuery, bạn có thể làm điều gì đó như $('h1.hc-reform').next('p').addClass('first-paragraph')).

Thông tin thêm: http://www.w3.org/TR/CSS2/selector.html hoặc http://css-tricks.com/child-and-sibling-selector/

— Justin Russell
nguồn