Toán tử chọn chung (*) áp dụng kiểu cho tất cả các phần tử trên trang. Nó cũng có thể áp dụng trong một ngữ cảnh cụ thể, bất kể loại, class hoặc ID. Nó thường dùng để reset global hoặc tạo kiểu chung.
* {
/* styles */
}. Trường hợp sử dụng cơ bản của bộ chọn chung
Bộ chọn chung áp dụng kiểu cho tất cả các phần tử trong tài liệu. Điều này làm cho nó hoàn hảo cho việc reset hoặc tạo quy tắc chung. Đoạn mã margin: 0; and padding: 0; reset lề và padding mặc định của trình duyệt cho tất cả phần tử.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
margin: 0;
padding: 0;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Hello World</h1>
<p>This is a demonstration of the universal selector.</p>
</body>
</html>
<!--Driver Code Ends-->
. Áp dụng kiểu mặc định cho tất cả các phần tử
Bạn có thể dùng bộ chọn chung để thiết lập các kiểu nhất quán như box-sizing hoặc font trên tất cả các phần tử. box-sizing: border-box; làm cho kích thước phần tử bao gồm padding và border. font-family đảm bảo kiểu chữ nhất quán.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Welcome</h1>
<p>This is styled with a global font and box-sizing property.</p>
</body>
</html>
<!--Driver Code Ends-->
. Làm nổi bật các phần tử với bộ chọn chung
Bộ chọn chung rất hữu ích cho việc gỡ lỗi bố cục bằng cách thêm đường viền. Thuộc tính outline: 1px solid red; làm nổi bật ranh giới của mọi phần tử.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
:root {
outline: none;
}
* {
outline: 1px solid red;
}
div {
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div>
<h1>Debug Mode</h1>
<p>All elements are outlined for debugging purposes.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. Nhắm mục tiêu các phần tử bằng thuộc tính
Kết hợp bộ chọn chung với bộ chọn thuộc tính để tạo kiểu cho tất cả phần tử có thuộc tính cụ thể. *[title] nhắm mục tiêu tất cả phần tử có thuộc tính title, thêm đường viền màu xanh lam.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
*[title] {
border: 2px dashed blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1 title="Heading">Hello</h1>
<p>This paragraph has no title.</p>
<p title="Paragraph">This paragraph has a title.</p>
</body>
</html>
<!--Driver Code Ends-->
. Tạo kiểu Scoped với bộ chọn hậu duệ
Bộ chọn chung có thể tạo kiểu cho tất cả các phần tử con của một phần tử cha cụ thể. .container * áp dụng các kiểu cho tất cả các phần tử bên trong class .container.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.container * {
color: green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<h2>Inside Container</h2>
<p>All text here is green.</p>
</div>
<p>This text is not green.</p>
</body>
</html>
<!--Driver Code Ends-->
. Loại trừ các phần tử cụ thể
Sử dụng bộ chọn chung với :not()pseudo-class để loại trừ các phần tử. *:not(h1) nhắm mục tiêu tất cả phần tử trừ h1, thay đổi màu văn bản thành xám.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
*:not(h1) {
color: gray;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Main Heading</h1>
<p>This paragraph is styled in gray.</p>
</body>
</html>
<!--Driver Code Ends-->
. Tạo kiểu Responsive với bộ chọn chung
Áp dụng các thay đổi global bằng cách sử dụng media queries và bộ chọn chung. Bộ chọn chung áp dụng kích thước phông chữ nhỏ hơn khi viewport hẹp hơn 600px.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
* {
font-size: 18px;
}
@media (max-width: 600px) {
* {
font-size: 14px;
}
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<h1>Responsive Design</h1>
<p>Resize the browser to see the text size change.</p>
</body>
</html>
<!--Driver Code Ends-->