Một trong những phần phức tạp của khai báo CSS là đi kèm với các bộ chọn thích hợp mà chúng tôi muốn áp dụng kiểu cho. Hiểu cách thức hoạt động của các bộ chọn này là bước đầu tiên tuyệt vời trong việc thiết kế một trang web chuyên nghiệp. Có nhiều cách để chọn một phần tử để áp dụng các kiểu trong CSS. Bài viết này cố gắng liệt kê một số bộ chọn phổ biến kèm theo lời giải thích

Bộ chọn là gì?

Bộ chọn xác định các phần tử được tạo kiểu trong khai báo CSS. Trong khai báo CSS, bộ chọn là phần đầu tiên xuất hiện trước dấu ngoặc nhọn. Ví dụ: phần tử HTML là bộ chọn trong phần khai báo bên dưới

section {
   font-size: 1rem;
   padding: 0.5rem;
   margin: 0.5rem;
 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

DOM là gì?

Trước khi tìm hiểu chi tiết về các loại Bộ chọn CSS phổ biến, người ta phải hiểu cách trình duyệt diễn giải trang HTML. Các trình duyệt cố gắng diễn giải nội dung của trang HTML bằng cách phân tích chúng thành một DOM. DOM là viết tắt của Mô hình đối tượng tài liệu. Có thể tìm thấy giải thích nhanh về DOM tại đây

Các loại Selector khác nhau

Dưới đây là một số loại Bộ chọn CSS phổ biến nhất

Bộ chọn chung

Các kiểu được áp dụng bằng bộ chọn chung được áp dụng cho tất cả các thành phần trên trang HTML. Áp dụng kiểu theo cách này được coi là không hiệu quả vì trình duyệt phải phân tích cú pháp tất cả các thành phần trong tài liệu HTML để áp dụng kiểu cho

* {
   color: red;  
 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn phần tử

Các phần tử HTML có thể được tạo kiểu bằng tên thẻ của chúng. Với CSS dưới đây, tất cả các thẻ

* {
   color: red;  
 }

4 sẽ được hiển thị bằng màu đỏ

h2 {
   color: red;  
 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn lớp

Bộ chọn lớp rất hữu ích nếu các kiểu tương tự cần được áp dụng cho các phần khác nhau của ứng dụng. Bộ chọn lớp được xác định bằng cách sử dụng

* {
   color: red;  
 }

5 theo sau là

* {
   color: red;  
 }

6 như được hiển thị bên dưới

.a-class {
   color: red;  
 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn ID

Thuộc tính id trong HTML được sử dụng để xác định duy nhất một phần tử HTML. Các id này cũng có thể được sử dụng để tạo kiểu cho một phần tử bằng cách sử dụng

* {
   color: red;  
 }

7 theo sau là

* {
   color: red;  
 }

8

#my-id {
   color: red;  
 }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn thuộc tính

Các phần tử HTML có thể được tạo kiểu dựa trên sự hiện diện của một thuộc tính bằng cách sử dụng bộ chọn Thuộc tính. Ví dụ khai báo bên dưới sẽ thêm đường viền vào bất kỳ phần tử nào có thuộc tính

* {
   color: red;  
 }

9

* {
   color: red;  
 }

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn nhóm

Nếu nhiều hơn một lớp hoặc thành phần chia sẻ cùng một kiểu, chúng có thể được phân tách bằng dấu phẩy và được xác định bằng một khai báo để tránh trùng lặp

* {
   color: red;  
 }

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn hợp chất

Nếu chúng ta chỉ muốn tạo kiểu cho một phần tử cụ thể có chứa một lớp được đặt tên, chúng ta có thể sử dụng bộ chọn compund. Với cách khai báo kiểu dưới đây, chỉ các phần tử ________ 30 với lớp ________ 31 sẽ được tạo kiểu. Kiểu dưới đây sẽ không được áp dụng nếu một phần tử

h2 {
   color: red;  
 }

2 tình cờ có cùng một

h2 {
   color: red;  
 }

1

* {
   color: red;  
 }

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn hậu duệ

Tất cả các phần tử được lồng bên trong một phần tử nhất định được gọi là hậu duệ. Ví dụ: với bộ chọn bên dưới, chúng ta có thể tạo kiểu cho tất cả các thành phần đoạn văn được lồng trong thẻ

h2 {
   color: red;  
 }

4

* {
   color: red;  
 }

9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn cha mẹ con

Bộ chọn Parent Child cụ thể hơn một chút so với bộ chọn con cháu. Nó chỉ tạo kiểu cho các phần tử là phần tử con trực tiếp của bộ chọn được xác định ở bên trái. Tuyên bố dưới đây chỉ áp dụng cho các thẻ neo là con trực tiếp của thẻ đoạn văn. Nếu thẻ

h2 {
   color: red;  
 }

5 tình cờ được lồng bên trong một thẻ

h2 {
   color: red;  
 }

6 khác, thẻ đó sẽ không nhận được kiểu

* {
   color: red;  
 }

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn anh chị em chung

Bộ chọn anh chị em chung giúp tạo kiểu cho tất cả anh chị em được xác định sau lựa chọn đã cho. Với bộ chọn bên dưới, người ta có thể tạo kiểu cho tất cả các phần tử đoạn văn được xác định sau phần tử

h2 {
   color: red;  
 }

7 và là anh em của phần tử

h2 {
   color: red;  
 }

7

* {
   color: red;  
 }

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn anh chị em liền kề

Kiểu bộ chọn anh chị em liền kề tương tự như bộ chọn anh chị em chung ngoại trừ kiểu sẽ chỉ được áp dụng cho bộ chọn anh chị em xuất hiện ngay sau bộ chọn

* {
   color: red;  
 }

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bộ chọn lớp giả

Bộ chọn lớp giả giúp tạo kiểu cho một trạng thái nhất định của một phần tử. Các kiểu bên dưới được áp dụng khi người dùng di chuột qua thẻ neo

* {
   color: red;  
 }

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

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

Bộ chọn phần tử giả giúp định kiểu một phần của phần tử. Kiểu phần tử giả được khai báo bằng cách sử dụng

h2 {
   color: red;  
 }

9 trong CSS3. Bộ chọn bên dưới tạo kiểu cho dòng đầu tiên của tất cả các thành phần đoạn văn

* {
   color: red;  
 }

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Suy nghĩ cuối cùng

Làm quen với các bộ chọn CSS sẽ giúp đưa ra khai báo CSS chính xác nhằm tạo kiểu cho các phần mong muốn của trang web theo cách chuyên nghiệp. Điều này cũng sẽ giúp tránh mắc nhiều lỗi tạo kiểu tốn kém.

5 bộ chọn trong CSS là gì?

Có bao nhiêu bộ chọn được sử dụng trong CSS và đó là những bộ chọn nào?

Các loại bộ chọn là gì?

Bộ chọn CSS phổ biến nhất là gì?