Bootstrap/CSS: Clearfix ảnh hưởng đến chỉ số chẵn/lẻ

Question

Tôi đang sử dụng clearfix để ngăn lưới khởi động bị phá vỡ khi tôi sử dụng các cột có độ cao khác nhau.

Tuy nhiên, khi div clearfix được thêm vào tài liệu, các cột xuất hiện sau khi nó trong nguồn hoạt động như thể chúng có chỉ số khác/lẻ khác với thực tế.

Tôi đã tạo demo có liên quan. Như bạn thấy, loại bỏ clearfix div, làm cho màu sắc của các div thay đổi như thể chỉ số của chúng đã thay đổi.

Bạn có biết những gì có thể gây ra và những gì tôi có thể làm để sửa chữa nó?

Answer 1

Nếu bạn nhìn vào nth-of-typedefinition nó xác định

Các:-of thứ n-cuối-type (một + b) ký hiệu pseudo-class đại diện cho một phần tử có một + b-1 anh chị em với cùng tên phần tử được mở rộng sau nó trong cây tài liệu, cho bất kỳ giá trị số nguyên không hoặc số nguyên dương nào của n và có phần tử gốc. Xem: nth-child() pseudo-class cho cú pháp của đối số của nó.

Điều quan trọng ở đây là nó khẳng định:

yếu tố trương nở cùng tên

Vì vậy, việc đó theo đúng nghĩa đen, các chỉ tiêu selector css một yếu tố cụ thể và sau đó lẻ và thậm chí được đối sánh trên phần tử cụ thể tên và không khớp với các phần tử được sử dụng bộ chọn cụ thể.

Đây là lý do tại sao thay thế div bằng span sẽ hoạt động vì nó sẽ không bao giờ khớp với vì nó là một phần tử khác.