Bộ chọn CSS
Bộ chọn CSS chọn (các) phần tử HTML bạn muốn tạo kiểu.
Bộ chọn CSS
Bộ chọn CSS được sử dụng để "tìm" (hoặc chọn) các phần tử HTML mà bạn muốn tạo kiểu.
Chúng ta có thể chia các bộ chọn CSS thành năm loại:
- Bộ chọn đơn giản (chọn các phần tử dựa trên tên, id, lớp)
- Bộ chọn bộ kết hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng)
- Bộ chọn lớp giả (chọn phần tử dựa trên một trạng thái nhất định)
- Bộ chọn phần tử giả (chọn và tạo kiểu cho một phần của phần tử)
- Bộ chọn thuộc tính (chọn các phần tử dựa trên một thuộc tính hoặc giá trị thuộc tính)
Trang này sẽ giải thích các bộ chọn CSS cơ bản nhất.
Bộ chọn phần tử CSS
Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử.
Thí dụ
Tại đây, tất cả các phần tử <p> trên trang sẽ được căn giữa với màu văn bản màu đỏ:
p
{
text-align: center;
color: red;
}
Bộ chọn id CSS
Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể.
Id của một phần tử là duy nhất trong một trang, do đó, bộ chọn id được sử dụng để chọn một phần tử duy nhất!
Để chọn một phần tử có id cụ thể, hãy viết một ký tự băm (#), sau đó là id của phần tử.
Thí dụ
Quy tắc CSS bên dưới sẽ được áp dụng cho phần tử HTML có id = "para1":
#para1
{
text-align: center;
color: red;
}
Lưu ý: Tên id không được bắt đầu bằng số!
Bộ chọn lớp CSS
Bộ chọn lớp chọn các phần tử HTML với một thuộc tính lớp cụ thể.
Để chọn các phần tử với một lớp cụ thể, hãy viết một ký tự dấu chấm (.), Theo sau là tên lớp.
Thí dụ
Trong ví dụ này, tất cả các phần tử HTML có class = "center" sẽ có màu đỏ và được căn giữa:
.center {
text-align: center;
color: red;
}
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.
Thí dụ
Trong ví dụ này, chỉ các phần tử <p> có class = "center" sẽ có màu đỏ và được căn giữa:
p.center {
text-align: center;
color: red;
}
Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một lớp.
Thí dụ
Trong ví dụ này, phần tử <p> sẽ được tạo kiểu theo class = "center" và thành class = "large":
<p class="center large">This paragraph refers to two classes.</p>
Lưu ý: Tên lớp không được bắt đầu bằng một số!
Bộ chọn chung CSS
Bộ chọn phổ quát (*) chọn tất cả các phần tử HTML trên trang.
Thí dụ
Quy tắc CSS bên dưới sẽ ảnh hưởng đến mọi phần tử HTML trên trang:
*
{
text-align: center;
color: blue;
}
Công cụ chọn nhóm CSS
Bộ chọn nhóm chọn tất cả các phần tử HTML có cùng định nghĩa kiểu.
Xem mã CSS sau (các phần tử h1, h2 và p có cùng định nghĩa kiểu):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Sẽ tốt hơn nếu nhóm các bộ chọn, để giảm thiểu mã.
Để nhóm các bộ chọn, hãy phân tách từng bộ chọn bằng dấu phẩy.
Thí dụ
Trong ví dụ này, chúng tôi đã nhóm các bộ chọn từ đoạn mã trên:
h1, h2, p
{
text-align: center;
color: red;
}
Tất cả các bộ chọn đơn giản CSS
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |