Bộ chọn CSS
Bộ chọn CSS chọn (các) phần tử HTML mà 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 thành phần HTML mà bạn muốn tạo kiểu.
Chúng ta có thể chia bộ chọn CSS thành năm loại:
- Bộ chọn đơn giản (chọn các thành phần dựa trên tên, id, lớp)
- Bộ chọn 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 các 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à định kiểu một phần của phần tử)
- Bộ chọn thuộc tính (chọn các thành phần dựa trên 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ử.
Ví dụ
Ở đâ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;
}
Hãy tự mình thử »Bộ chọn id CSS
Bộ chọn id sử dụng thuộc tính id của 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, vì vậy 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 ký tự băm (#), theo sau là id của phần tử.
Ví 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;
}
Hãy tự mình thử »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 có thuộc tính lớp cụ thể.
Để chọn các phần tử thuộc một lớp cụ thể, hãy viết ký tự dấu chấm (.), theo sau là tên lớp.
Ví 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;
}
Hãy tự mình thử »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.
Ví dụ
Trong ví dụ này, chỉ các phần tử <p> có class="center" mới có màu đỏ và được căn giữa:
p.center {
text-align: center;
color: red;
}
Hãy tự mình thử »Các phần tử HTML cũng có thể tham chiếu đến nhiều lớp.
Ví dụ
Trong ví dụ này, phần tử <p> sẽ được tạo kiểu theo class="center" và class="large":
<p class="center large">This paragraph refers to two classes.</p> Hãy tự mình thử »Lưu ý: Tên lớp không được bắt đầu bằng số!
Bộ chọn phổ quát CSS
Bộ chọn phổ quát (*) chọn tất cả các thành phần HTML trên trang.
Ví dụ
Quy tắc CSS bên dưới sẽ ảnh hưởng đến mọi thành phần HTML trên trang:
*
{
text-align: center;
color: blue;
}
Hãy tự mình thử »Bộ chọn nhóm CSS
Bộ chọn nhóm sẽ chọn tất cả các thành phần HTML có cùng định nghĩa kiểu.
Hãy 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.
Ví 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;
} Hãy tự mình thử » 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 |
Video: Bộ chọn CSS đơn giản
