Mô-đun css đã nhập

Bộ chọn CSS là phần đầu tiên của Quy tắc CSS. Đó là một mẫu các phần tử và các thuật ngữ khác cho trình duyệt biết phần tử HTML nào sẽ đượ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 cá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 khác, bạn có thể đã gặp một số bộ chọn khác nhau và biết được rằng có những bộ chọn nhắm mục tiêu tài liệu theo những cách khác nhau — ví dụ: bằng cách chọn một phần tử chẳng hạn như

h1, .special {
  color: blue;
}

h1, .special {
  color: blue;
}

Trong CSS, bộ chọn được xác định trong đặc tả Bộ chọn CSS; . Phần lớn các bộ chọn mà bạn sẽ gặp được xác định trong đặc tả Bộ chọn cấp 3 và đặc tả Bộ chọn cấp 4, cả hai đều là các đặc 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

Nếu bạn có nhiều 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 thành một 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 một CSS cho một

h1, .special {
  color: blue;
}

h1, .special {
  color: blue;
}

h1 {
  color: blue;
}

.special {
  color: blue;
}

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

h1, .special {
  color: blue;
}

Khoảng trắng có giá trị trước hoặc sau dấu phẩy. Bạn cũng có thể thấy các bộ chọn dễ đọc hơn nếu mỗi bộ chọn nằm trên một dòng mới

h1,
.special {
  color: blue;
}

Trong ví dụ trực tiếp bên dưới, 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 phải giống nhau sau khi kết hợp chúng

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

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

________số 8_______

Tuy nhiên, khi được kết hợp, cả

h1, .special {
  color: blue;
}

h1, ..special {
  color: blue;
}

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

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

h1, .special {
  color: blue;
}

h1 {
}

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

.box {
}

hoặc, một ID

#unique {
}

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ử

a[title] {
}

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 với một giá trị cụ thể

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

Nhóm bộ chọn này bao gồm các lớp giả, tạo kiểu cho các trạng thái nhất định của một phần tử. Ví dụ, lớp giả

h1,
.special {
  color: blue;
}

h1, .special {
  color: blue;
}

Nó cũng bao gồm các phần tử giả, chọn một phần nhất định của phần tử thay vì chính phần tử đó. Ví dụ:

h1,
.special {
  color: blue;
}

h1,
.special {
  color: blue;
}

h1, .special {
  color: blue;
}

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

h1,
.special {
  color: blue;
}

h1,
.special {
  color: blue;
}

h1, .special {
  color: blue;
}

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