Chọn CSS đa lớp
Để chọn các phần tử với một lớp cụ thể, hãy viết dấu chấm (. ) ký tự, theo sau là tên của lớp Show
Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp. Để làm điều này, hãy bắt đầu với tên phần tử, sau đó viết dấu chấm (. ), theo sau là tên của lớp (xem Ví dụ 1 bên dưới) Bộ chọn lớpBộ chọn lớp CSS so khớp các phần tử dựa trên nội dung thuộc tính của chúng
Lưu ý rằng điều này tương đương với
Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu
Tìm thấy một vấn đề nội dung với trang này?
Trang này được sửa đổi lần cuối vào ngày 29 tháng 9 năm 2022 bởi những người đóng góp MDN Trong tài liệu HTML, giá trị lớp có thể chứa một từ hoặc có thể có nhiều từ được phân tách bằng dấu cách Để làm việc với một giá trị lớp có một từ duy nhất. Bạn có thể sử dụng bộ chọn lớp chung hoặc bộ chọn lớp dành riêng cho phần tử Tôi đã viết về cách sử dụng bộ chọn lớp chỉ chứa một từ làm giá trị Bộ chọn lớp CSS được giải thích với sự trợ giúp của các ví dụ về mãNâng cao kiến thức của bạn về bộ chọn lớp CSS trong 5 phútjav. tiếng Anh đơn giản. io Bây giờ, hãy xem cách làm việc với bộ chọn lớp có nhiều từ được phân tách bằng dấu cách Giả sử bạn có tài liệu HTML sau Để chọn lớp có giá trị 'quốc gia'. Bạn có thể viết CSS sau Trong HTML ở trên, cả hai thành phần đoạn văn đều có một giá trị lớp chứa từ 'quốc gia'. Vậy là cả hai đều được chọn Bạn sẽ nhận được kết quả sau Thế còn từ đầu tiên trong cùng một giá trị lớp thì sao?Thay vì dùng từ ‘đất nước’, bạn cũng có thể chọn từ khác ‘Bob’ hoặc ‘Anna’ để chọn đoạn văn Không nhất thiết phải viết từ thứ hai để làm toàn bộ phong cách CSS sau đây làm rõ điểm này Tuyên bố đầu tiên p. Bob đổi màu nền của đoạn có câu “I live in Australia” thành màu xanh lam Nhưng khi p tiếp theo. câu lệnh country được thực thi, màu nền của cả hai phần tử p chuyển thành màu nâu. Trước đây, câu “I live in Australia” có màu xanh được thay thế bằng màu nâu Bây giờ tuyên bố sau đây p. Anna bị xử tử. Khi thực hiện, màu nền của câu “I also live in Australia” chuyển sang màu đỏ Đây là những gì kết quả trông giống như Ảnh chụp màn hìnhKhông bắt buộc phải nêu tên phần tửTrong CSS ở trên, tôi đã đề cập đến tên của phần tử cùng với giá trị của lớp Nếu bạn muốn bỏ qua tên phần tử, nó sẽ hoạt động tốt Nhưng nếu bạn muốn chọn bất kỳ phần tử cụ thể nào với một giá trị lớp cụ thể. Bạn phải đề cập đến tên phần tử Đây là CSS không có tên phần tử Không có thay đổi trong kết quả được quan sát Đây là kết quả Ảnh chụp màn hìnhChuỗi hai bộ chọn lớpNếu bạn xâu chuỗi hai bộ chọn lớp cho tài liệu HTML ở trên, bạn sẽ chỉ có thể chọn một phần tử Đối với tài liệu HTML ở trên Giả sử bạn đã viết mã CSS sau Với đoạn mã trên, bạn sẽ có thể chọn một phần tử cụ thể Nó sẽ chọn phần tử đoạn văn có giá trị lớp là 'Bob Country' Bạn sẽ nhận được kết quả sau Ảnh chụp màn hìnhTôi đã viết bộ chọn CSS ở dạng. quốc gia. Bob Giá trị của thuộc tính lớp được liên kết với phần tử đoạn văn là 'Bob country' Nó có nghĩa là thứ tự của các từ thậm chí không quan trọng. Ngay cả khi bạn đã viết CSS như p.Bob.country{ background-color: pink; Phong cách sẽ cho kết quả tương tự Vì vậy khi sử dụng nhiều tên lớp, bạn không phải lo lắng về thứ tự. Bạn có thể làm điều đó theo bất kỳ cách nào có thể Tóm tắt các điểm trênVới cùng một tài liệu HTML như tài liệu trước Bây giờ chúng tôi thử sử dụng hai kiểu CSS trên cùng một lúc. Đây là giao diện của kiểu CSS .country {background-color: lightgreen;}.country.Bob{background-color: pink;} với. bộ chọn CSS quốc gia, cả hai đoạn đều có màu xanh lục nhạt ở đầu Sau đó,. quốc gia. Khai báo Bob, làm cho nền của đoạn có giá trị lớp 'Bob Country' có màu hồng Bạn sẽ nhận được kết quả sau Ảnh chụp màn hìnhTên không nằm trong danh sách được phân tách bằng dấu cáchĐiều gì sẽ xảy ra nếu bộ chọn CSS chứa một tên không phải là một phần của thuộc tính lớp được phân tách bằng dấu cách? Xem xét tài liệu HTML sau Bất kỳ nhà phát triển nào đã viết CSS sau Bạn sẽ nhận thấy rằng từ thành phố không phải là một phần giá trị của bất kỳ thẻ đoạn nào Trong trường hợp này, vì từ này không xuất hiện dưới dạng giá trị của bất kỳ thuộc tính lớp nào nên nó sẽ không hoạt động. Không thành vấn đề nếu từ Bob khác là một phần của giá trị lớp Nó phải khớp hoàn toàn, nếu không, nó sẽ không hoạt động Nếu từ thành phố là một phần giá trị của thuộc tính lớp, thì nền của thẻ p sẽ chuyển sang màu đỏ Khi sử dụng bộ chọn nhiều lớp, bạn nên lưu ý rằng bạn không được sử dụng một từ không nằm trong danh sách được phân tách bằng dấu cách Đây là những gì kết quả trông giống như Bạn có muốn theo dõi nhanh sự nghiệp của mình với tư cách là một lập trình viên không? Tham gia nhóm những người yêu thích lập trình và công nghệ Nhấn vào đây để tham gia cộng đồng lập trình viên thầm lặng Với sự giúp đỡ của cộng đồng, chúng ta sẽ khắc phục những sự cố lớn nhất trong cuộc đời của các lập trình viên và thảo luận về kỹ thuật giao diện người dùng cũng như phụ trợ Chúng tôi sẽ giúp bạn lập trình lại sự hiểu biết của bạn về những thứ khác nhau trong công nghệ Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Kiểm tra Sự bất hòa trong cộng đồng của chúng tôi và tham gia Tập thể tài năng của chúng tôi Tôi có thể chọn nhiều lớp trong CSS không?Có thể cung cấp cho một số mục trên trang của bạn cùng một kiểu ngay cả khi chúng không có cùng tên lớp . Để làm điều này, bạn chỉ cần liệt kê tất cả các yếu tố bạn muốn tạo kiểu và đặt dấu phẩy giữa mỗi yếu tố.
Làm cách nào để chọn tất cả các thành phần có lớp trong CSS?Để chọn các phần tử với một lớp cụ thể, viết dấu chấm (. ) ký tự, theo sau là tên lớp . Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp. Để làm điều này, hãy bắt đầu với tên phần tử, sau đó viết dấu chấm (. )
Làm cách nào để tạo kiểu cho hai lớp trong CSS?Bạn có thể áp dụng cùng một kiểu cho các lớp khác nhau cùng một lúc theo 2 cách khác nhau và chúng ta sẽ xem hai điều này bằng các ví dụ. Cách tiếp cận 1. Theo cách tiếp cận này, chúng ta sẽ có nhiều khai báo CSS cho cùng một thuộc tính bằng cách phân tách chúng bằng dấu phẩy . |