CSS phần tử tiếp theo

Question

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 thế nào tôi có thể nói sử dụng CSS rằng mỗi <p> thẻ mà theo h1.hc-reform sử dụng: clear:both;

sẽ là:

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

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

Answer 1

này được gọi là selector adjacent sibling, và nó được đại diện bởi một dấu cộng ...

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

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

Answer 2

no > là bộ chọn con.

một trong những bạn muốn là +

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

hỗ trợ trình duyệt là không lớn

Answer 3

Các > là một child selector. Vì vậy, nếu HTML của bạn trông giống như sau:

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

... thì đó 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 adjacent selector:

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

Answer 4

Bạn có thể sử dụng sibling selector~:

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

này sẽ chọn tất cả các p yếu tố đến fter .hc-reform, không chỉ là cái đầu tiên.

Answer 5

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

Điều 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 cũ của Internet Explorer; 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 với việc 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 (trong jQuery, ví dụ, bạn có thể làm một cái 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-selectors/