Tạo các kiểu và bố cục CSS cụ thể

Sep 12, 2025

Cách

Trong hướng dẫn này, chúng tôi sẽ xem xét các cách thay đổi các kiểu CSS của các yếu tố, cũng như dường như tạo kiểu cho cha mẹ của họ, tùy thuộc vào số lượng các yếu tố. Chúng tôi cũng sẽ thấy cách thay đổi bố cục của các yếu tố dựa trên số lượng của chúng, để tạo ra sự thích nghi hơn Bố trí trang web Điều đó làm cho việc sử dụng không gian tốt hơn.

Thủ thuật CSS để cách mạng hóa bố cục web của bạn

Cuối cùng, chúng tôi sẽ bao gồm việc sử dụng các quầy CSS để hiển thị chỉ mục của một phần tử trong một bộ bên trong nó, cũng như hiển thị tổng số lượng bên trong cha mẹ. Tất cả những điều này sẽ chỉ đạt được với CSS thuần túy, mà không cần JavaScript hoặc Frameworks, dẫn đến mã đơn giản và hiệu quả hơn.

Để xây dựng một trang web mà không cần mã vô tận, bạn sẽ cần một người tạo ra trang web . Và bất cứ khả năng của trang web của bạn, đảm bảo bạn web hosting Dịch vụ phù hợp với mục đích. Cho một cái gì đó khác nhau, có được của bạn lưu trữ đám mây lên để cào.

Bộ chọn yếu tố đơn

CSS3 chỉ có một cặp bộ chọn duy nhất có thể xác định số lượng của các phần tử, cụ thể là: Chỉ dành cho trẻ em và: Chỉ chọn chọn loại. Đã nói điều này, họ thực sự chỉ có thể xác định xem một yếu tố có tự mình hay có anh chị em hay không. Bộ chọn: Chỉ dành cho trẻ em khớp với các yếu tố là con duy nhất của cha mẹ, trong khi: chỉ có loại khớp với các yếu tố là những yếu tố duy nhất của loại của chúng.

Thật không may, đó là cách các bộ chọn duy nhất đi nhưng có một vài bộ chọn khác có thể nhắm mục tiêu các yếu tố dựa trên thứ tự của chúng trong một tập hợp các yếu tố tương tự. Đây là: Nth-Child,: Nth-of-Type, Nth-Last-Child và Nth-Leg-of-toyle, thường được sử dụng để nhắm mục tiêu các yếu tố dựa trên thứ tự của chúng trong một tập hợp các yếu tố tương tự. Các bộ chọn: thứ n cuối cùng của trẻ em và thứ n cuối cùng được sử dụng để xác định thứ tự của các phần tử đếm ngược từ phần tử cuối cùng thành đầu tiên. Kết hợp những điều này với các bộ chọn khác cho phép chúng tôi xây dựng nhiều chuỗi phức tạp hơn nhắm mục tiêu các yếu tố cụ thể dựa trên số lượng của chúng.

Chuỗi chọn chọn số lượng cụ thể

selector chains — Bộ chọn: Đầu tiên của loại: Nth-Last-Type (3) và Bộ kết hợp anh chị chung ~ có thể được kết hợp để nhắm mục tiêu đầu tiên trong ba và tất cả anh chị em của nó, do đó tất cả trong một bộ ba

Trong số bốn người chọn đã nói ở trên, một bộ chính chúng tôi sẽ sử dụng trong hướng dẫn này là thứ nth-of-tope. Sự khác biệt giữa điều này và bộ chọn Last Nth-Last là cái sau bao gồm tất cả các yếu tố 'anh chị em trong tập hợp, trong khi trước đây chỉ bao gồm các phần tử của cùng loại HTML và do đó là chọn lọc nhiều hơn. Trong phần còn lại của hướng dẫn này, chúng tôi sẽ sử dụng bộ chọn loại -Of, tuy nhiên các biến thể -Child đều hợp lệ như nhau.

Loại cuối của NTH có thể được sử dụng cùng với các bộ chọn loại đầu tiên phổ biến hơn để tạo chuỗi nhắm mục tiêu phần tử đầu tiên trong một tập hợp số lượng mong muốn. Ví dụ: chúng ta có thể sử dụng: đầu tiên của loại: thứ n cuối cùng loại (3) để nhắm mục tiêu các phần tử cả đầu tiên và thứ ba từ cuối loại hoặc nói cách khác, phần lớn của A bộ ba. Sau đó, chúng tôi có thể mở rộng điều này với bộ kết hợp Sibinator chung ~ để chọn tất cả các anh chị em theo dõi đầu tiên của bộ ba. Kết hợp hai chuỗi chọn này, chúng ta có thể tạo một bộ chọn phức tạp nhắm vào các phần tử là đầu tiên của ba phần tử và tất cả các phần tử cùng loại theo dõi nó, do đó chọn tất cả các phần tử trong một bộ ba.

 .Box: Thứ nhất loại: Nth-Last-of-Type (3),
.box: đầu tiên loại: thứ n cuối cùng loại (3) ~ .box

Chuỗi bộ chọn này không chỉ hoạt động cho một số nguyên tố cụ thể mà thậm chí có thể được sửa đổi để nhắm mục tiêu một loạt các đại lượng.

selector chain — Người chọn thứ n Cuối cùng loại (n + 2) và: thứ n cuối cùng loại (-n + 2) có thể được sử dụng để nhắm mục tiêu các phần tử trong các bộ nhiều hơn hai lần tương ứng

Nếu chúng ta muốn nhắm mục tiêu các phần tử trong một tập hợp với số lượng nhiều hơn hoặc ít hơn một giá trị cụ thể, chúng ta có thể sử dụng chuỗi với các kỹ thuật (n + m) và (-n + m) tương ứng. Chẳng hạn, để nhắm mục tiêu tất cả các phần tử trong một tập hợp hai hoặc nhiều yếu tố chúng ta có thể sử dụng:

 .Box: Thứ nhất loại: Nth-Last-of-Type (N + 2),
.box: Đầu tiên của loại: thứ n cuối cùng loại (n + 2) ~ .box

Tương tự, chúng ta có thể nhắm mục tiêu tất cả các yếu tố trong một tập hợp hai hoặc ít các yếu tố bằng cách sử dụng:

.Box: Đầu tiên của loại: Nth-Last-of-Type (-n + 2),
.Box: Thứ nhất loại: thứ n cuối cùng loại (-n + 2) ~ .Box

Như bạn có thể thấy đây là một chuỗi bộ chọn mạnh mẽ cho phép chúng tôi đạt được những thứ rất thú vị và hữu ích mà không cần JavaScript hoặc các khung khác. Nó đặc biệt hữu ích khi tạo ra các bố cục thích ứng thay đổi dựa trên số lượng phần tử.

Bố cục động, định lượng cụ thể

grid layouts with odd and even numbers — Đối với một số lượng chẵn các phần tử bố trí lưới trông tuyệt vời, nhưng không quá nhiều đối với số lẻ

Giả sử chúng ta muốn hiển thị một nhóm các hộp hiển thị kết quả của một cuộc gọi tìm kiếm hoặc một cuộc gọi API trong bố cục lưới hai cột. Vấn đề nằm ở thực tế là kết quả đến từ một nguồn bên ngoài và chúng tôi không có cách nào để biết số lượng kết quả sẽ được trả lại, do đó chúng tôi không biết có bao nhiêu hộp sẽ được tạo. Mặc dù lưới có vẻ tuyệt vời cho một số lượng hộp chẵn, khi áp dụng cho một số lẻ, hộp cuối cùng nằm trên một hàng một mình và trông giống nhau, loại lẻ.

Điều này đặc biệt có vấn đề khi sử dụng các mục Flexbox với Flex-Grow được áp dụng cho chúng vì nó khiến phần tử cuối cùng phát triển thành khoảng trống trên hàng, do đó chiếm toàn bộ chiều rộng. Một cách để ngăn chặn điều này có thể là làm cho số đầu tiên của một số hộp lẻ chiếm một hàng đầy đủ bằng cách áp dụng chiều rộng 100% cho các hộp đầu tiên cũng là một số kỳ lạ từ cuối, sử dụng: con thứ nhất: thứ n cuối cùng loại (lẻ). Điều này cung cấp một bố cục tốt hơn vì nó mang lại kết quả đầu tiên và có liên quan hoặc gần đây nhất nhiều hơn so với cái cuối cùng.

Chúng ta thậm chí có thể thêm một trường hợp đặc biệt khi số lượng chia hết bằng ba lần sử dụng: con thứ nhất: thứ n cuối cùng loại (3n) để chuyển đổi lưới thành bố cục ba cột bằng cách áp dụng chiều rộng 33% cho đầu tiên Các hộp trong một bộ với một số lượng chia hết cho ba và tất cả các hộp theo nó.

 .Box {
  Chiều rộng: 50%;
Không thể

.box: con thứ nhất: thứ n cuối cùng loại (lẻ) {
  Chiều rộng: 100%;
Không thể

.box: con thứ nhất: thứ n cuối cùng loại (3n),
.box: con thứ nhất: thứ n cuối cùng loại (3n) ~ .box {
  Chiều rộng: 33%;
}

Phần kết luận

different layouts — Bố cục có thể được thay đổi dựa trên số lượng các phần tử chỉ bằng cách sử dụng chuỗi chọn CSS

Như chúng ta đã thấy, các bộ chọn CSS có thể bị xiềng xích với nhau theo nhiều cách thú vị để áp dụng các kiểu và bố cục thích ứng thay đổi dựa trên số lượng các phần tử. Các chuỗi chọn cũng có thể được sử dụng để dường như áp dụng các kiểu cho cha mẹ của một tập hợp các yếu tố của một số lượng nhất định, bằng cách sử dụng :: trước hoặc: sau khi các yếu tố giả được định vị để chiếm toàn bộ kích thước của cha mẹ. Kết hợp với các quầy CSS, các yếu tố giả này có thể được sử dụng để hiển thị tổng số hậu duệ trong phần tử cha, cũng như văn bản thay đổi tùy thuộc vào số lượng hậu duệ.

Các kỹ thuật này cung cấp một cách có giá trị để tạo các kiểu và bố cục dựa trên năng động, hữu ích khi xử lý một số phần tử không xác định, thường là trường hợp khi xử lý API.

Bài viết này ban đầu được xuất bản trong số phát hành 308 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số phát hành 308 tại đây hoặc là Đăng ký tại đây .

Những bài viết liên quan:

5 mẹo cho CSS siêu nhanh
Tạo một bố cục đáp ứng với lưới CSS
Hiểu thuộc tính Hiển thị CSS

Tạo các kiểu và bố cục CSS cụ thể

Bộ chọn yếu tố đơn

Chuỗi chọn chọn số lượng cụ thể

Bố cục động, định lượng cụ thể

Phần kết luận

Cách - Các bài báo phổ biến nhất

Làm thế nào để ngăn chặn kính của bạn sương mù khi mặc mặt nạ

Tạo trang đích 3D WebGL

Cách vẽ nghệ thuật hoạt hình đầy màu sắc trong Photoshop

Tạo họa tiết ma quái với các kỹ thuật hỗn hợp-phương tiện

Nâng cấp kết cấu của bạn trong Trình thiết kế chất

Giới thiệu về Thử nghiệm Frontend

Làm thực vật thực tế trong rạp chiếu phim 4D

Bắt đầu với Prototyping trong Adobe XD

Thể loại