Sử dụng nhiều bộ chọn lớp để áp dụng kiểu cho các thành phần là một cách tiếp cận mạnh mẽ. Có những trường hợp sử dụng thực tế khi sử dụng một bộ chọn duy nhất là không đủ hoặc thêm giá trị thấp hơn giá trị mà nó thêm vào. Trong bài viết này, chúng ta sẽ quan sát cách nhiều bộ chọn nâng cao mã kiểu của chúng ta trong một ví dụ thực tế
Lưu ý rằng bài viết này nói về việc sử dụng nhiều bộ chọn lớp chứ không phải bộ chọn tổ hợp. Một ví dụ về nhiều bộ chọn là .class1.class2
- nhắm mục tiêu một phần tử có cả hai lớp, lớp1 và lớp2. Mặt khác, .class1 > .class2
là một tổ hợp nhắm mục tiêu vào tất cả các con trực tiếp [không phải tất cả con cháu] của .class1
với .class2
được áp dụng.
Giả sử bạn được giao nhiệm vụ xây dựng giao diện người dùng chia sẻ tệp. Nó cung cấp các tính năng cơ bản sau
- Một danh sách các tập tin để chọn từ
- Một danh sách những người nhận để lựa chọn từ
Cả tệp và người nhận đều được thể hiện dưới dạng lưới các biểu tượng. Khi một tệp/thành viên được chọn, biểu tượng của nó phải được tạo kiểu với một thiết kế cụ thể để thể hiện lựa chọn. Cả hai loại biểu tượng đều có giao diện khác nhau và bắt buộc phải có các kiểu lựa chọn khác nhau
Chúng ta có thể sử dụng một lớp. biểu tượng để tạo kiểu cho giao diện mặc định và một lớp khác .selected
. Nhưng vấn đề là, các biểu tượng có các kiểu trạng thái mặc định và được chọn khác nhau. Nhiều bộ chọn lớp giải quyết vấn đề này một cách suôn sẻ. Chúng tôi có thể phân tách các kiểu theo quy tắc
/* Multiple Selectors Demonstration */ span.file-icon:not[.selected]:hover, .file-icon:not[.selected]:hover .page-turn { border-color: lightgreen; } .file-icon:not[.selected]:hover .line { background-color: lightgreen; } span.file-icon.selected { background-color: lightgreen; } .avatar:not[.selected]:hover { border-color: lightgreen; } .avatar.selected .head, .avatar.selected .body { background-color: lightgreen; } /* UI styling */ * { font-family: sans-serif; margin: 0; padding: 0; } body { background-color: rgba[72, 171, 224, 0.15]; display: flex; justify-content: center; align-items: center; height: 100vh; } .file-sharing-card { display: flex; justify-content: space-around; align-items: center; text-align: center; background-color: white; width: 80%; height: 80%; padding: 10px; border-radius: 15px; box-shadow: 0px 0px 15px 9px lightgray; } span.file-icon { position: relative; box-sizing: border-box; display: inline-block; height: 20vh; width: 16vh; margin: 5px; border: 2px solid black; border-radius: 5px; border-top-right-radius: 20px; cursor: pointer; } .file-icon .page-turn { display: inline-block; height: 35%; width: 30%; position: absolute; right: 0; border-left: 2px solid black; border-bottom: 2px solid black; } .content-lines { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 50%; left: 25%; width: 50%; height: 30%; } .content-lines .line { height: 1px; background: black; } .avatar { display: inline-block; position: relative; display: inline-block; height: 20vh; width: 20vh; margin: 5px; border: 2px solid black; border-radius: 50%; cursor: pointer; } .avatar .head { display: inline-block; position: absolute; display: inline-block; height: 30%; width: 30%; border: 2px solid transparent; border-radius: 20px; top: 13%; left: 50%; transform: translateX[-50%]; background: #48abe0; } .avatar .body { display: inline-block; position: absolute; height: 25%; width: 50%; border: 2px solid transparent; border-radius: 10vh 10vh 0 0; top: 53%; left: 50%; transform: translateX[-50%]; background: #48abe0; }0 và
/* Multiple Selectors Demonstration */ span.file-icon:not[.selected]:hover, .file-icon:not[.selected]:hover .page-turn { border-color: lightgreen; } .file-icon:not[.selected]:hover .line { background-color: lightgreen; } span.file-icon.selected { background-color: lightgreen; } .avatar:not[.selected]:hover { border-color: lightgreen; } .avatar.selected .head, .avatar.selected .body { background-color: lightgreen; } /* UI styling */ * { font-family: sans-serif; margin: 0; padding: 0; } body { background-color: rgba[72, 171, 224, 0.15]; display: flex; justify-content: center; align-items: center; height: 100vh; } .file-sharing-card { display: flex; justify-content: space-around; align-items: center; text-align: center; background-color: white; width: 80%; height: 80%; padding: 10px; border-radius: 15px; box-shadow: 0px 0px 15px 9px lightgray; } span.file-icon { position: relative; box-sizing: border-box; display: inline-block; height: 20vh; width: 16vh; margin: 5px; border: 2px solid black; border-radius: 5px; border-top-right-radius: 20px; cursor: pointer; } .file-icon .page-turn { display: inline-block; height: 35%; width: 30%; position: absolute; right: 0; border-left: 2px solid black; border-bottom: 2px solid black; } .content-lines { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 50%; left: 25%; width: 50%; height: 30%; } .content-lines .line { height: 1px; background: black; } .avatar { display: inline-block; position: relative; display: inline-block; height: 20vh; width: 20vh; margin: 5px; border: 2px solid black; border-radius: 50%; cursor: pointer; } .avatar .head { display: inline-block; position: absolute; display: inline-block; height: 30%; width: 30%; border: 2px solid transparent; border-radius: 20px; top: 13%; left: 50%; transform: translateX[-50%]; background: #48abe0; } .avatar .body { display: inline-block; position: absolute; height: 25%; width: 50%; border: 2px solid transparent; border-radius: 10vh 10vh 0 0; top: 53%; left: 50%; transform: translateX[-50%]; background: #48abe0; }1.
Codepen sau minh họa giao diện người dùng và kiểu như vậy. Nhiều kiểu bộ chọn lớp đã được đặt ở đầu các kiểu để nhấn mạnh. Các chi tiết chung về việc triển khai giao diện người dùng này nằm ngoài phạm vi của bài viết này. Độc giả quan tâm có thể xem qua codepen để biết nó đã được xây dựng như thế nào.
Select Files
Select Recipients
/* Multiple Selectors Demonstration */ span.file-icon:not[.selected]:hover, .file-icon:not[.selected]:hover .page-turn { border-color: lightgreen; } .file-icon:not[.selected]:hover .line { background-color: lightgreen; } span.file-icon.selected { background-color: lightgreen; } .avatar:not[.selected]:hover { border-color: lightgreen; } .avatar.selected .head, .avatar.selected .body { background-color: lightgreen; } /* UI styling */ * { font-family: sans-serif; margin: 0; padding: 0; } body { background-color: rgba[72, 171, 224, 0.15]; display: flex; justify-content: center; align-items: center; height: 100vh; } .file-sharing-card { display: flex; justify-content: space-around; align-items: center; text-align: center; background-color: white; width: 80%; height: 80%; padding: 10px; border-radius: 15px; box-shadow: 0px 0px 15px 9px lightgray; } span.file-icon { position: relative; box-sizing: border-box; display: inline-block; height: 20vh; width: 16vh; margin: 5px; border: 2px solid black; border-radius: 5px; border-top-right-radius: 20px; cursor: pointer; } .file-icon .page-turn { display: inline-block; height: 35%; width: 30%; position: absolute; right: 0; border-left: 2px solid black; border-bottom: 2px solid black; } .content-lines { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 50%; left: 25%; width: 50%; height: 30%; } .content-lines .line { height: 1px; background: black; } .avatar { display: inline-block; position: relative; display: inline-block; height: 20vh; width: 20vh; margin: 5px; border: 2px solid black; border-radius: 50%; cursor: pointer; } .avatar .head { display: inline-block; position: absolute; display: inline-block; height: 30%; width: 30%; border: 2px solid transparent; border-radius: 20px; top: 13%; left: 50%; transform: translateX[-50%]; background: #48abe0; } .avatar .body { display: inline-block; position: absolute; height: 25%; width: 50%; border: 2px solid transparent; border-radius: 10vh 10vh 0 0; top: 53%; left: 50%; transform: translateX[-50%]; background: #48abe0; }
function selectItem[event] { var classList = document.getElementById[event].classList; if [classList.contains["selected"]] classList.remove["selected"]; else classList.add["selected"]; }
Nhiều bộ chọn lớp CSS bổ sung thêm giá trị khi các trạng thái của các phần tử khác nhau có các kiểu được chia sẻ một phần. Thay vì lặp lại mã kiểu, chúng ta có thể chia sẻ mã kiểu trùng lặp và ghi đè mã kiểu duy nhất. Hãy chứng minh điều này bằng một ví dụ
Giả sử chúng ta đang xây dựng một tập hợp các thông báo có nội dung văn bản được đánh dấu giống như sau
Văn bản này chứa một thông báo Ngẫu nhiên quan trọng
Văn bản này chứa một thông báo Thành công quan trọng.
Văn bản này có văn bản Cảnh báo quan trọng.
Văn bản này có thông báo Lỗi quan trọng.
Yêu cầu của chúng tôi như sau
- Văn bản được đánh dấu phải được in đậm và lớn
- Văn bản bình thường sẽ được đánh dấu màu xanh lam. Các trạng thái Thành công, Cảnh báo, Lỗi sẽ có màu Xanh lục, Vàng/Vàng, Đỏ tương ứng
Chúng tôi nhanh chóng lưu ý rằng các văn bản quan trọng bình thường của chúng tôi có cỡ chữ lớn và màu xanh lam
.important {
font-size: 1.5rem;
color: blue;
}
Tiếp tục, chúng tôi nhận thấy rằng các văn bản thành công, cảnh báo và lỗi có cùng kích thước phông chữ mặc dù màu sắc khác nhau. Thay vì tạo một lớp riêng biệt là
/* Multiple Selectors Demonstration */ span.file-icon:not[.selected]:hover, .file-icon:not[.selected]:hover .page-turn { border-color: lightgreen; } .file-icon:not[.selected]:hover .line { background-color: lightgreen; } span.file-icon.selected { background-color: lightgreen; } .avatar:not[.selected]:hover { border-color: lightgreen; } .avatar.selected .head, .avatar.selected .body { background-color: lightgreen; } /* UI styling */ * { font-family: sans-serif; margin: 0; padding: 0; } body { background-color: rgba[72, 171, 224, 0.15]; display: flex; justify-content: center; align-items: center; height: 100vh; } .file-sharing-card { display: flex; justify-content: space-around; align-items: center; text-align: center; background-color: white; width: 80%; height: 80%; padding: 10px; border-radius: 15px; box-shadow: 0px 0px 15px 9px lightgray; } span.file-icon { position: relative; box-sizing: border-box; display: inline-block; height: 20vh; width: 16vh; margin: 5px; border: 2px solid black; border-radius: 5px; border-top-right-radius: 20px; cursor: pointer; } .file-icon .page-turn { display: inline-block; height: 35%; width: 30%; position: absolute; right: 0; border-left: 2px solid black; border-bottom: 2px solid black; } .content-lines { display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 50%; left: 25%; width: 50%; height: 30%; } .content-lines .line { height: 1px; background: black; } .avatar { display: inline-block; position: relative; display: inline-block; height: 20vh; width: 20vh; margin: 5px; border: 2px solid black; border-radius: 50%; cursor: pointer; } .avatar .head { display: inline-block; position: absolute; display: inline-block; height: 30%; width: 30%; border: 2px solid transparent; border-radius: 20px; top: 13%; left: 50%; transform: translateX[-50%]; background: #48abe0; } .avatar .body { display: inline-block; position: absolute; height: 25%; width: 50%; border: 2px solid transparent; border-radius: 10vh 10vh 0 0; top: 53%; left: 50%; transform: translateX[-50%]; background: #48abe0; }2 và lặp lại các kiểu bên cạnh màu duy nhất, chúng ta có thể chia sẻ các kiểu chồng chéo và ghi đè các kiểu duy nhất bằng cách sử dụng nhiều bộ chọn lớp
.important.success {
color: green;
}
.important.warning {
color: gold;
}
.important.error {
color: red;
}
Đây là một ví dụ cơ bản với rất ít thuộc tính. Nhưng trong các cơ sở mã trong thế giới thực, giá trị bổ sung này có thể tiết kiệm một lượng lớn mã khỏi sự trùng lặp
Phần kết luận
CSS cung cấp phương pháp nhắm mục tiêu rất hiệu quả bằng cách sử dụng nhiều bộ chọn lớp. Cách tiếp cận này cho phép dễ dàng tách biệt các kiểu cho các thành phần khác nhau trong khi sử dụng lại tên của các lớp. Điều này đặc biệt hữu ích nếu tên mong muốn đại diện cho một trạng thái chung chung [chẳng hạn như .selected
trong ví dụ trên] nhưng các yêu cầu về kiểu dáng lại khác. Nó thậm chí còn tăng thêm giá trị khi chúng ta cần chia sẻ một số kiểu trên nhiều phần tử
Chia sẻ trên Twitter · Chia sẻ trên Facebook
UnusedCSS giúp chủ sở hữu trang web loại bỏ CSS không sử dụng của họ mỗi ngày. Đăng ký để xem bạn có thể loại bỏ bao nhiêu