Để 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
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
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
.class_name { style properties }
Lưu ý rằng điều này tương đương với attribute selector sau
[class~=class_name] { style properties }
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
This paragraph has red text.
This paragraph has red text and a yellow background.
This paragraph has red text and "fancy" styling.
This is just a regular paragraph.
Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu
- Bộ chọn CSS
- Học CSS. Bộ chọn
Tìm thấy một vấn đề nội dung với trang này?
- Chỉnh sửa trang trên Github
- Báo cáo vấn đề nội dung
- Xem nguồn trên GitHub
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út
jav. 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ình
Khô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ớp
Nế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ình
Tô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