Bộ chọn CSS được sử dụng để chọn nội dung bạn muốn tạo kiểu. Bộ chọn là một phần của bộ quy tắc CSS. Bộ chọn CSS chọn các thành phần HTML theo id, lớp, loại, thuộc tính, v.v.
Có một số loại bộ chọn khác nhau trong CSS.
Có một số loại bộ chọn khác nhau trong CSS.
- Bộ chọn phần tử CSS
- Bộ chọn CSS Id
- Bộ chọn lớp CSS
- Bộ chọn phổ quát CSS
- Bộ chọn nhóm CSS
1) Bộ chọn phần tử CSS
Bộ chọn phần tử chọn phần tử HTML theo tên.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
2) Bộ chọn Id CSS
Bộ chọn id chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Một id luôn là duy nhất trong trang vì vậy nó được chọn để chọn một yếu tố duy nhất, duy nhất.
Nó được viết với ký tự băm (#), theo sau là id của phần tử.
Hãy lấy một ví dụ với id "para1".
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello tienanhvn.blogspot.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
3) Bộ chọn lớp CSS
Bộ chọn lớp chọn các thành phần HTML với thuộc tính lớp cụ thể. Nó được sử dụng với một ký tự thời gian. (ký hiệu dừng hoàn toàn) theo sau là tên lớp.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>