Đôi khi có thể mong muốn loại bỏ lề trên hoặc lề trái khỏi phần tử đầu tiên trong vùng chứa. Tương tự như vậy, lề phải hoặc lề dưới từ phần tử cuối cùng trong vùng chứa. Bạn có thể thực hiện việc này bằng cách áp dụng thủ công các lớp vào HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Số 0 “trên cùng” / ”dưới cùng” hữu ích với chồng phần tử theo chiều dọc, số 0 “trái” / “phải” hữu ích cho các hàng ngang (nói chung). Nhưng… phương pháp này phụ thuộc vào việc bạn tự thêm các lớp vào HTML. Bộ chọn giả có thể là một cách tốt hơn ít xâm nhập hơn:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Bạn có thể muốn thay thế dấu * bằng các bộ chọn cụ thể hơn theo nhu cầu của mình.
“Mỗi phần ba”, v.v.
Giả sử bạn có một khối nổi gồm 9 phần tử, 3 x 3. Rất phổ biến là bạn có thể cần loại bỏ lề phải khỏi các mục thứ 3, 6 và 9. Bộ chọn giả con thứ n có thể trợ giúp ở đó:
* > :nth-child(3n+3) ( margin-right: 0; )Phương trình ở đó, 3n + 3, hoạt động như sau:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9,
v.v.
jQuery
jQuery sử dụng các bộ chọn CSS3, bao gồm: first-child,: last-child và: nth-child (). Điều này có nghĩa là trong các trình duyệt không hoặc không hỗ trợ đầy đủ các bộ chọn này, chúng SẼ hoạt động trong jQuery, vì vậy bạn có thể thay thế hỗ trợ CSS bằng hỗ trợ JavaScript. Ví dụ:
$("* > :nth-child(3n+3)").css("margin-right", 0);Hỗ trợ trình duyệt
: first-child và: last-child hoạt động trong bản phát hành mới nhất từ tất cả các trình duyệt chính, nhưng không có trong IE 6.: first-child được hỗ trợ trong IE 7+. : nth-child hoạt động trong Safari 3+, Firefox 3.5+ và Chrome 1+, nhưng vẫn không hoạt động trong IE8.
Cũng xem bài báo của David Oliver.