Hướng dẫn how many types of selectors in css - có bao nhiêu loại bộ chọn trong css

Bộ chọn là gì?

Bạn đã gặp người chọn đã. Bộ chọn CSS là phần đầu tiên của quy tắc CSS. Đó là một mẫu của các phần tử và các thuật ngữ khác cho trình duyệt biết các phần tử HTML nên được chọn để có các giá trị thuộc tính CSS bên trong quy tắc được áp dụng cho chúng. Phần tử hoặc phần tử được chọn bởi bộ chọn được gọi là chủ đề của bộ chọn.

Trong các bài viết trước, bạn đã gặp một số bộ chọn khác nhau và biết rằng có các bộ chọn nhắm mục tiêu tài liệu theo các cách khác nhau - ví dụ bằng cách chọn một phần tử như h2 hoặc một lớp như .special.

Trong CSS, các bộ chọn được xác định trong đặc tả CSS Selectors; Giống như bất kỳ phần nào khác của CSS, họ cần có sự hỗ trợ trong trình duyệt để họ hoạt động. Phần lớn các bộ chọn mà bạn sẽ đi qua được xác định trong đặc tả bộ chọn cấp 3, đây là một đặc điểm kỹ thuật trưởng thành, do đó bạn sẽ tìm thấy hỗ trợ trình duyệt tuyệt vời cho các bộ chọn này.

Danh sách chọn

Nếu bạn có nhiều hơn một thứ sử dụng cùng một CSS thì các bộ chọn riêng lẻ có thể được kết hợp vào danh sách bộ chọn để quy tắc được áp dụng cho tất cả các bộ chọn riêng lẻ. Ví dụ: nếu tôi có cùng CSS cho một h2 và cũng là một lớp .special, tôi có thể viết điều này dưới dạng hai quy tắc riêng biệt.

h2 {
  color: blue;
}

.special {
  color: blue;
}

Tôi cũng có thể kết hợp chúng thành một danh sách chọn, bằng cách thêm dấu phẩy giữa chúng.

h2, .special {
  color: blue;
}

Không gian trắng là hợp lệ trước hoặc sau dấu phẩy. Bạn cũng có thể tìm thấy các bộ chọn dễ đọc hơn nếu mỗi người nằm trên một dòng mới.

h2,
.special {
  color: blue;
}

Trong ví dụ trực tiếp dưới đây, hãy thử kết hợp hai bộ chọn có khai báo giống hệt nhau. Màn hình trực quan nên giống nhau sau khi kết hợp chúng.

Khi bạn nhóm chọn theo cách này, nếu bất kỳ bộ chọn nào không hợp lệ, toàn bộ quy tắc sẽ bị bỏ qua.

Trong ví dụ sau, quy tắc chọn lớp không hợp lệ sẽ bị bỏ qua, trong khi h2 vẫn sẽ được tạo kiểu.

h2 {
  color: blue;
}

..special {
  color: blue;
}

Tuy nhiên, khi kết hợp, cả h2 và lớp sẽ không được tạo kiểu vì toàn bộ quy tắc được coi là không hợp lệ.

h2, ..special {
  color: blue;
}

Các loại người chọn

Có một vài nhóm người chọn khác nhau và biết bạn có thể cần loại chọn nào sẽ giúp bạn tìm được công cụ phù hợp cho công việc. Trong các tiểu trường của bài viết này, chúng tôi sẽ xem xét các nhóm người chọn khác nhau chi tiết hơn.

Trình chọn loại, lớp và ID

Nhóm này bao gồm các bộ chọn nhắm mục tiêu một phần tử HTML như

h2, .special {
  color: blue;
}

Nó cũng bao gồm các bộ chọn nhắm mục tiêu một lớp:

Hoặc, một ID:

Bộ chọn thuộc tính

Nhóm bộ chọn này cung cấp cho bạn các cách khác nhau để chọn các phần tử dựa trên sự hiện diện của một thuộc tính nhất định trên một phần tử:

Hoặc thậm chí thực hiện lựa chọn dựa trên sự hiện diện của một thuộc tính có giá trị cụ thể:

a[href="https://example.com"]
{
}

Lớp giả và yếu tố giả

Nhóm các bộ chọn này bao gồm các lớp giả, theo phong cách nhất định của một yếu tố. Ví dụ, lớp giả pseudo chỉ chọn một phần tử khi nó được di chuột qua con trỏ chuột:

Nó cũng bao gồm các yếu tố giả, chọn một phần nhất định của một phần tử chứ không phải chính phần tử. Ví dụ,

h2, .special {
  color: blue;
}

h2, .special {
  color: blue;
}

h2, .special {
  color: blue;
}

Tổ hợp

Nhóm cuối cùng của các bộ chọn kết hợp các bộ chọn khác để nhắm mục tiêu các yếu tố trong các tài liệu của chúng tôi. Ví dụ, sau đây, chọn các đoạn là trẻ em trực tiếp của các yếu tố

h2, .special {
  color: blue;
}

h2, .special {
  color: blue;
}

Bản tóm tắt

Trong bài viết này, chúng tôi đã giới thiệu các bộ chọn CSS, cho phép bạn nhắm mục tiêu các yếu tố HTML cụ thể. Tiếp theo, chúng tôi sẽ xem xét kỹ hơn về loại chọn loại, lớp và ID.

Để biết danh sách đầy đủ các bộ chọn, hãy xem Tham chiếu Bộ chọn CSS của chúng tôi.

• Trước
• Tổng quan: Khối xây dựng
• Tiếp theo

Trong mô -đun này