Bộ chọn CSS

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 tôi có thể chia các bộ chọn CSS thành năm loại:

Bộ chọn đơn giản (chọn thành phần dựa trên tên, id, lớp)
Bộ chọn kết hợp (chọn các yếu 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 thành phần 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 thành phần dựa trên giá trị thuộc tính hoặc 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 thành phần là duy nhất trong một trang, vì vậy bộ chọn id được sử dụng để chọn một thành phần 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ử.

Thí dụ
Quy tắc CSS dưới đây sẽ được áp dụng cho phần tử HTML với id = "para1":

#para1 {
  text-align: center;
  color: red;
}

Lưu ý: Tên id không thể bắt đầu bằng số!

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ể.

Để 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 = "centre" sẽ có màu đỏ và 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> với class = "centre" sẽ đượ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 = "centre" và to class = "Large":

<p class="center large">This paragraph refers to two classes.</p>