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;
}
1Và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;
}
2Và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;
}
7Và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;
}
9Và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;
}
2Và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;
}
0Và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;
}
1Và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;
}
2Và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;
}
3Và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.