Khóa học IT CSS Cơ bản 020_Bộ chọn

Bộ chọn

Bộ chọn được sử dụng để chọn các phần tử trong tài liệu cần được áp dụng kiểu. Thông qua các mẫu chọn khác nhau, chúng cho trình duyệt biết phần tử nào áp dụng kiểu nào.

Bộ chọn ID (#)

Chọn phần tử theo ID duy nhất của nó. Bộ chọn ID phải đảm bảo tính duy nhất trong tài liệu; không nên sử dụng lại cùng một ID.

Ví dụ:

1
#myID {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Class (.)

Chọn phần tử theo tên class của nó. Bộ chọn class có thể được sử dụng cho nhiều phần tử, và một phần tử có thể có nhiều class.

Ví dụ:

1
.myClass {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Phần tử (p, h1)

Chọn phần tử theo tên phần tử HTML. Bộ chọn phần tử sẽ chọn tất cả các phần tử khớp trong tài liệu.

Ví dụ:

1
p {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Toàn cục (*)

Chọn tất cả các phần tử trong tài liệu. Bộ chọn toàn cục nên được sử dụng cẩn thận vì nó khớp với tất cả các phần tử và ảnh hưởng đến hiệu suất.

Ví dụ:

1
* {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Thuộc tính ([type="text"])

Chọn phần tử theo giá trị thuộc tính của nó. Bộ chọn thuộc tính có thể chọn phần tử dựa trên các giá trị thuộc tính khác nhau.

Ví dụ:

1
input[type="text"] {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Giả lớp

Chọn trạng thái hoặc vị trí đặc biệt của phần tử. Bộ chọn giả lớp được sử dụng để chọn trạng thái tương tác của phần tử, như hover, visited, v.v.

Ví dụ:

1
a:hover {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Phần tử giả

Chọn các phần đặc biệt của phần tử. Bộ chọn phần tử giả được sử dụng để chọn các phần ảo của phần tử, như dòng đầu tiên, chữ cái đầu tiên, v.v.

Ví dụ:

1
p::first-line {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Con

Chọn phần tử con trực tiếp của một phần tử. Bộ chọn con chỉ chọn các con trực tiếp, không bao gồm hậu duệ.

Ví dụ:

1
ul > li {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Anh em chung

Chọn tất cả các phần tử anh em có cùng phần tử cha với phần tử được chỉ định. Bộ chọn anh em chung chọn tất cả các phần tử anh em sau phần tử được chỉ định, không yêu cầu liền kề.

Ví dụ:

1
h2 ~ p {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Anh em liền kề

Chọn phần tử anh em ngay sau phần tử được chỉ định. Bộ chọn anh em liền kề chọn phần tử anh em ngay sau phần tử được chỉ định.

Ví dụ:

1
h2 + p {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Hậu duệ

Chọn tất cả các phần tử hậu duệ dưới một phần tử. Bộ chọn hậu duệ chọn tất cả các hậu duệ dưới phần tử được chỉ định, bao gồm các phần tử lồng nhau sâu.

Ví dụ:

1
div p {
2
  /* quy tắc kiểu */
3
}

Bộ chọn Hợp nhất (,)

Kết hợp nhiều bộ chọn với nhau để chọn tất cả các phần tử khớp với bất kỳ bộ chọn nào. Bộ chọn hợp nhất được sử dụng để đồng thời chọn nhiều loại phần tử khác nhau và áp dụng cùng quy tắc kiểu.

Ví dụ:

1
h1, h2, h3 {
2
  /* quy tắc kiểu */
3
}

Danh sách Bộ chọn

Liệt kê nhiều bộ chọn theo thứ tự ưu tiên, chọn cái khớp nhất. Danh sách bộ chọn cho phép chọn nhiều phần tử theo các tổ hợp bộ chọn khác nhau để đáp ứng các yêu cầu kiểu dáng có điều kiện khác nhau.

Ví dụ:

1
div p,
2
.myClass,
3
#myID {
4
  /* quy tắc kiểu */
5
}

Quy tắc Đặt tên Bộ chọn

• Tên bộ chọn phải là chuỗi gồm chữ cái, số, dấu gạch dưới hoặc dấu gạch ngang.

• Tên bộ chọn phải bắt đầu bằng chữ cái hoặc dấu gạch dưới.

• Tên bộ chọn không được bắt đầu bằng số.

• Tên bộ chọn không được chứa khoảng trắng.

  Khuyến nghị:

• Sử dụng tên có ý nghĩa: Tên bộ chọn nên phản ánh rõ ràng mục đích hoặc chức năng của các phần tử được chọn.

• Tuân theo quy ước đặt tên: Sử dụng quy ước đặt tên nhất quán, như camelCase hoặc đặt tên phân cách bằng dấu gạch ngang, để cải thiện tính nhất quán của mã.

• Tránh các chữ viết tắt vô nghĩa: Tránh sử dụng các chữ viết tắt quá ngắn hoặc vô nghĩa để các nhà phát triển khác có thể hiểu ý nghĩa của bộ chọn.

• Tuân theo ngữ nghĩa: Sử dụng các bộ chọn ngữ nghĩa để cải thiện khả năng đọc và bảo trì mã.