Tìm hiểu cách chọn tất cả các phần tử HTML ngoại trừ phần tử đầu tiên bằng CSS `:not(:first-child) bộ chọn.
Nếu bạn thêm bộ quy tắc sau vào biểu định kiểu CSS của mình, mọi phần tử h2 trên toàn bộ trang web của bạn sẽ có lề trên 64px.
h2 {
margin-top: 64px;
}Nhưng điều gì sẽ xảy ra nếu bạn không muốn đặt lợi nhuận cao nhất đó cho phần tử h2 đầu tiên trên trang web của bạn nói chung, nhưng mọi phần tử h2 khác?
Sử dụng bộ chọn:not (:first-child)
Thêm bộ quy tắc sau vào biểu định kiểu của bạn:
h2:not(:first-child) {
margin-top: 64px;
}Giờ đây, mọi phần tử h2 trên trang web của bạn sẽ luôn nhận được cùng một giá trị margin-top - ngoại trừ phần tử h2 đầu tiên trên mỗi tài liệu (trang / bài đăng).
Trường hợp sử dụng cho bộ chọn:not (:first-child)
Giả sử bạn đang tạo kiểu bố cục kiểu chữ cho trang web của mình. Bạn quyết định rằng tất cả các bài viết của mình h2 phần tử tiêu đề phải có margin-top: 64px; để cung cấp một số khoảng thở giữa các phần.
Nhưng ở đầu mỗi bài viết, bạn có một phần giới thiệu với phong cách tạp chí / áp phích với ảnh bìa, lớp phủ và các thành phần văn bản khác nhau ở trên cùng. Trong trường hợp đó, bạn có thể sử dụng một số phần tử tiêu đề (h1 cho tiêu đề, h2 cho dòng giới thiệu, v.v.).
Trong trường hợp đó, bạn có thể không muốn sử dụng chính xác các giá trị khoảng cách (margin / padding) trong phần giới thiệu, như bên trong bài viết của bạn. Bằng cách sử dụng :not(:first-child) bộ chọn, bạn loại bỏ vấn đề đó.
Bạn có thể sử dụng bộ chọn này trên mọi phần tử HTML. Một trường hợp sử dụng phổ biến khác là nếu bạn sử dụng danh sách không có thứ tự <ul> cho menu của bạn. Bạn có thể có một số kiểu rất cụ thể mà bạn muốn thêm vào ul trong menu của bạn, nhưng không có trên phần còn lại của trang web của bạn (căn chỉnh, đường viền, màu sắc, v.v.).
Hiện tại không phải CSS chỉ dành cho việc tạo kiểu với các lớp sao?
Trong phát triển web hiện đại, việc tránh trực tiếp các bộ chọn phần tử tạo kiểu là điều phổ biến. Hầu hết sử dụng lớp Hiện nay. Tôi cũng là người yêu thích các lớp học vì chúng giúp viết CSS có thể mở rộng và tái sử dụng dễ dàng hơn trên các nền tảng web đang phát triển.
Tuy nhiên, kiểu dáng của bộ chọn trực tiếp vẫn có chỗ đứng. Thực tế là thiết lập một số kiểu cơ sở / toàn cầu trực tiếp trên các bộ chọn phần tử để tự động tạo nên tính nhất quán và đồng nhất thông qua giao diện người dùng sản phẩm của bạn. Cách tiếp cận này có thể giúp bạn tiết kiệm rất nhiều kiểu giao diện người dùng lặp đi lặp lại - khi được thực hiện đúng cách.