Bộ chọn CSS được sử dụng để chọn các phần tử HTML bằng cách khớp từng phần tử của một mẫu nhất định. Chúng tôi xác định các kiểu bằng cách khai báo thuộc tính và giá trị của chúng bên trong bộ chọn.
Cú pháp
Cú pháp khai báo kiểu như sau -
Selector {
property: value; } CSS có các bộ chọn đơn giản, bộ chọn thuộc tính, lớp giả, phần tử giả và sự kết hợp của các bộ chọn thông qua các tổ hợp tiêu chuẩn. Bảng sau liệt kê một số bộ chọn -
| Bộ chọn | Loại bộ chọn | Mô tả |
|---|---|---|
| * | Bộ chọn đa năng | Đối sánh tất cả các phần tử |
| e | Bộ chọn loại | Khớp tất cả các phần tử thuộc loại e |
| e1e2 | Bộ chọn hậu duệ | Đối sánh bất kỳ phần tử e2 nào là con của phần tử e1. |
| e1> e2 | Bộ chọn con | Đối sánh bất kỳ phần tử e2 nào là con của phần tử e1. |
| e [bar ="demo"] | Bộ chọn thuộc tính | Đối sánh bất kỳ phần tử e nào có giá trị thuộc tính "bar" chính xác bằng "demo". |
| # id | Bộ chọn ID | Đối sánh phần tử có ID bằng "id". |
Ví dụ
Các ví dụ sau minh họa bộ chọn CSS -
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
text-decoration: overline black;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
text-decoration: overline red;
}
span {
font-size: 1.4em;
}
#demo {
box-shadow: inset 0 0 20px orange;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
