Bộ chọn nhóm CSS được sử dụng để chọn nhiều phần tử và định kiểu chúng lại với nhau. Điều này làm giảm mã và nỗ lực thêm để khai báo các kiểu chung cho mỗi phần tử. Để nhóm các bộ chọn, mỗi bộ chọn được phân tách bằng dấu cách.
Cú pháp
Cú pháp cho bộ chọn nhóm CSS như sau -
element, element {
/*declarations*/
} Các ví dụ sau minh họa bộ chọn nhóm CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
article, p, img {
display: block;
margin: auto;
text-align: center;
border-bottom: double orange;
}
</style>
</head>
<body>
<article>Demo Text</article>
<p>This is demo text.</p>
<br/>
<img src="https://www.tutorialspoint.com/swing/images/swing.jpg">
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div::after,p::after{
content: "Demo text";
margin: 4px;
box-shadow: inset 0 0 4px darkorange;
}
</style>
</head>
<body>
<div></div>
<p>This is example text.</p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
