Bảng khóa học

Hướng dẫn CSS cơ bản

Hướng dẫn CSS trung cấp

Hướng dẫn cao cấp CSS3

Thiết kế phản hồi CSS

Hướng dẫn CSS lưới

Mô hình CSS

Mô hình CSS

Kiểm tra CSS

Kiểm tra CSS

Tài liệu tham khảo CSS

Khóa học tự chọn

Khuyến nghị khóa học:

Thủ ngục CodeW3C.com

Chọn phần tử CSS

Trang trước Cú pháp CSS
Trang tiếp theo Sử dụng CSS

Chọn phần tử CSS

Bộ lọc CSS được sử dụng để “tìm kiếm” (hoặc chọn) các phần tử HTML cần thiết lập phong cách.

Chúng ta có thể chia bộ lọc CSS thành năm loại:

Bộ lọc đơn giản (Chọn phần tử dựa trên tên, id, lớp)
Bộ lọc kết hợp(Chọn phần tử dựa trên mối quan hệ đặc biệt giữa chúng)
Bộ lọc ảo lớp(Chọn phần tử dựa trên trạng thái đặc biệt)
Bộ lọc ảo(Chọn phần tử một phần và thiết lập phong cách của nó)
Bộ lọc thuộc tính(Chọn phần tử 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ộ lọc CSS cơ bản.

Chọn器 phần tử CSS

Chọn器 phần tử chọn các phần tử HTML dựa trên tên phần tử.

Thực例

Tại đây, tất cả các phần tử <p> trên trang sẽ được căn giữa và có màu văn bản đỏ:

p {
  text-align: center;
  color: red;
}

Thử ngay

Chọn器 id CSS

Chọn器 id sử dụng thuộc tính id của phần tử HTML để chọn phần tử đặc định.

Id của phần tử là duy nhất trên trang, vì vậy chọn器 id được sử dụng để chọn một phần tử duy nhất!

Để chọn phần tử có id đặc định, hãy viết một dấu số (#), sau đó theo id của phần tử.

Thực例

Quy tắc CSS này sẽ áp dụng cho phần tử HTML có id="para1":

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

Thử ngay

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

Chọn器 lớp CSS

Chọn器 lớp chọn các phần tử HTML có thuộc tính lớp đặc định.

Để chọn phần tử có lớp đặc định, hãy viết một dấu chấm (.) ký tự, sau đó theo tên lớp.

Thực例

Trong ví dụ này, tất cả các phần tử HTML có class="center" sẽ có màu đỏ và căn giữa:

.center {
  text-align: center;
  color: red;
}

Thử ngay

Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML đặc định sẽ bị ảnh hưởng bởi lớp.

Thực例

Trong ví dụ này, chỉ các phần tử <p> có class="center" mới được căn giữa:

p.center {
  text-align: center;
  color: red;
}

Thử ngay

Các phần tử HTML cũng có thể tham chiếu đến nhiều lớp.

Thực例

Trong ví dụ này, phần tử <p> sẽ được đặt phong cách dựa trên class="center" và class="large":

<p class="center large">Câu này tham chiếu đến hai lớp.</p>

Thử ngay

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

Chọn器 phổ quát CSS

Chọn器 phổ quát (*). chọn tất cả các phần tử HTML trên trang.

Thực例

Các quy tắc CSS dưới đây sẽ ảnh hưởng đến tất cả các phần tử HTML trên trang:

* {
  text-align: center;
  color: blue;
}

Thử ngay

Chọn器 nhóm CSS

Chọn器 nhóm CSS chọn tất cả các phần tử HTML có cùng định nghĩa phong cách.

Xin xem mã CSS dưới đây (h1, h2 và p phần tử có cùng định nghĩa phong cách):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Tốt nhất là nhóm các chọn器 để tối ưu hóa mã.

Để nhóm các chọn器, hãy sử dụng dấu phẩy để tách mỗi chọn器.

Thực例

Trong ví dụ này, chúng ta sẽ nhóm các chọn器 trên mã của chúng ta:

h1, h2, p {
  text-align: center;
  color: red;
}

Thử ngay

Tất cả các chọn器 CSS đơn giản

Chọn器	Ví dụ	Mô tả ví dụ
.class	.intro	Chọn tất cả các phần tử có class="intro".
#id	#firstname	Chọn phần tử có id="firstname".
*	*	Chọn tất cả các phần tử.
element	p	Chọn tất cả các phần tử <p>.
element,element,..	div, p	Chọn tất cả các phần tử <div> và tất cả các phần tử <p>.