Tạo truy vấn số lượng CSS với Trình tạo QQ

Rất ít nhà phát triển biết hoặc sử dụng Truy vấn số lượng CSS trên trang web của họ. Đây là một tính năng khá phức tạp nhưng cũng hữu ích khi bạn có các mặt hàng khác nhau trong một container.

Một truy vấn số lượng có thể thay đổi / cập nhật các thuộc tính CSS dựa trên giới hạn được xác định trước cho các yếu tố con. Ví dụ, nếu bạn có hơn ba mục trong một danh sách bạn có thể làm cho phông chữ nhỏ hơn để tiết kiệm phòng. Một ví dụ khác là cập nhật độ rộng của một liên kết dựa vào số lượng liên kết trong menu điều hướng.

Nhiệm vụ như thế này có thể trở nên phức tạp nhanh chóng nhưng nhờ Trình tạo truy vấn số lượng bạn không cần phải ghi nhớ bất kỳ cú pháp khó hiểu.

Ứng dụng web này tạo tất cả mã cho bạn Để tiết kiệm thời gian. Bạn cần phải chọn từ ba menu thả xuống tùy chỉnh truy vấn số lượng của bạn. Họ làm việc như thế này:

• Bộ chọn - yếu tố con nào cần được tính
• Kiểu truy vấn - chọn giữa “nhất”, “ít nhất”, hoặc một kết hợp của “nhất” & “ít nhất”
• Số tiền - tổng số mục cần lọc

Điều này có vẻ khó hiểu trong mã nhưng nó là một khái niệm thực sự đơn giản. Truy vấn số lượng cho phép bạn áp dụng các thuộc tính CSS dựa trên tổng số phần tử con.

Vì vậy bạn có thể thêm các kiểu CSS nhất định khi có, nói, ít nhất 4 yếu tố con (4 trở lên). Hoặc, bạn có thể chỉ thêm kiểu khi có nhất 4 yếu tố con (0-4 con).

Bộ chọn kết hợp cho phép bạn xác định chính xác có bao nhiêu con tối thiểu và tối đa là cần thiết để hiển thị các thuộc tính CSS nhất định.

Trong ví dụ trên ảnh chụp màn hình ở trên, tôi đã đặt toàn bộ “nhất” mặt hàng đến 2. Điều này có nghĩa là khi tôi có 0, 1 hoặc 2 con thì các khối có màu đỏ. Nếu tôi thêm một đứa nữa để có 3 đứa con thì tất cả các khối đều chuyển sang màu xanh.

Nếu bạn không biết những gì đang xảy ra bạn có thể nhấp vào hộp thông tin nhỏ trong thanh bên. Nó sẽ mang đến một cửa sổ phương thức với sự kiện và cú pháp giải thích tính năng truy vấn số lượng.

Đây là một công cụ rất tiện dụng cho cả người mới bắt đầu và nhà phát triển có kinh nghiệm. Nó sẽ tiết kiệm nhiều thời gian về lâu dài và nó sẽ giúp bạn tạo các trang web năng động hơn.

Để bắt đầu, hãy truy cập trang web xây dựng QQ và bắt đầu tùy chỉnh các tính năng của bạn. Bạn có thể đồ chơi với kết quả và kiểm tra xem trước trực tiếp trong khung bên phải để tìm hiểu cách thay đổi của bạn ảnh hưởng đến các yếu tố con.

Dự án này cũng có sẵn trên GitHub vì vậy bạn được tự do kiểm tra mã nguồn hoặc thậm chí tải về một bản sao tại địa phương. Và nếu bạn yêu thích ứng dụng này hoặc có bất kỳ câu hỏi / đề xuất nào cho người tạo Drew Minns, bạn có thể bắn cho anh ấy một tweet nhanh chóng @drewisthe.