Các loại CSS Selector dùng để chọn nội dung mà chúng ta muốn tạo kiểu. Nó giúp chọn các phần tử dựa trên lớp, id, loại, v.v. Bộ chọn CSS là một thành phần của Bộ quy tắc CSS
Gói phát triển phần mềm tất cả trong một[hơn 600 khóa học, hơn 50 dự án]
Giá bán
Xem các khóa học
Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 [86.007 xếp hạng]
Các loại bộ chọn CSS
Có 5 loại Bộ chọn CSS có sẵn cho chúng tôi. Chúng ta sẽ xem xét các Bộ chọn CSS quan trọng sau đây
Bắt đầu khóa học phát triển phần mềm miễn phí của bạn
Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác
- Bộ chọn chung CSS
- Bộ chọn phần tử CSS
- Bộ chọn Id CSS
- Bộ chọn lớp CSS
- Bộ chọn thuộc tính CSS
1. Bộ chọn chung CSS
Trong một trang HTML, nội dung phụ thuộc vào các thẻ HTML. Một cặp thẻ xác định một thành phần trang web cụ thể. Bộ chọn chung CSS chọn tất cả các thành phần trên trang web
Thí dụ
* {
color: blue;
font-size: 21px;
}Hai dòng mã được bao quanh bởi dấu ngoặc nhọn này sẽ ảnh hưởng đến tất cả các thành phần có trên trang HTML. Chúng tôi khai báo một bộ chọn chung với sự trợ giúp của dấu hoa thị ở đầu dấu ngoặc nhọn. Bộ chọn chung có thể được sử dụng cùng với các bộ chọn khác kết hợp.
2. Bộ chọn phần tử CSS
CSS Element Selector is also known as a Type selector. Element Selector in CSS tries to match the HTML elements having the same name. Therefore, a selector of
- matches all the
- elements i.e. all the unordered lists in that HTML page.
Chúng ta hãy xem một ví dụ cho bộ chọn phần tử
ul {
border: solid 1px #ccc;
}Để hiểu rõ hơn về điều này, chúng ta hãy xem một mã HTML ví dụ để áp dụng mã CSS mà chúng tôi đã viết ở trên
- A
- B
- C
Demo text
- 1
- 2
- 3
In this example, we will find mainly three elements namely the
- element, the
- element. Since our CSS code applies to the
- tag specifically, the changes in the border will be done only for our
- tags, and not for the
- tags as well, but in some scenarios, the styles may apply to the inner elements.
3. Bộ chọn ID CSS
Bộ chọn CSS ID giúp nhà phát triển khớp ID do nhà phát triển tạo với nội dung tạo kiểu của nó. Bộ chọn ID được sử dụng với sự trợ giúp của dấu thăng [#] trước tên ID do nhà phát triển khai báo. Bộ chọn ID khớp với mọi phần tử HTML có thuộc tính ID với giá trị giống với giá trị của bộ chọn, không có dấu thăng
Đây là một ví dụ
#box {
width: 90px;
margin: 10px;
}Mã CSS này có thể được sử dụng để khớp với phần tử có id là 'hộp', như trong câu sau
Here, the tag
Giá trị của ID đang được sử dụng được cho là duy nhất. Nếu cùng một ID được sử dụng cho hai hoặc nhiều phần tử, thì mã không hợp lệ về mặt kỹ thuật, nhưng kiểu dáng của phần tử sẽ vẫn được áp dụng, do đó thường tránh có cùng một ID
Phải sử dụng một ID khác nhau mỗi lần cho mỗi trang HTML, khá cứng nhắc. Bên cạnh việc đối mặt với các vấn đề về tính cứng nhắc, bộ chọn ID trong CSS cũng phải đối mặt với vấn đề về tính đặc hiệu
4. Bộ chọn lớp CSS
Bộ chọn Lớp CSS là một trong những bộ chọn hữu ích nhất trong tất cả các bộ chọn. Nó được khai báo bằng cách sử dụng một dấu chấm theo sau tên của lớp. Tên lớp này được xác định bởi người viết mã, giống như trường hợp của bộ chọn ID. Bộ chọn lớp tìm kiếm mọi phần tử có giá trị thuộc tính có cùng tên với tên lớp, không có dấu chấm
Thí dụ
.square {
margin: 20px;
width: 20px;
}Mã CSS này có thể được sử dụng để khớp với phần tử có lớp 'hình vuông, như trong câu sau
Kiểu này cũng áp dụng cho tất cả các thành phần HTML khác có giá trị thuộc tính cho lớp là 'vuông'. Một phần tử có cùng giá trị thuộc tính lớp giúp chúng ta sử dụng lại các kiểu và tránh lặp lại không cần thiết. Ngoài ra, Bộ chọn lớp có lợi vì nó cho phép chúng tôi thêm một số lớp vào một phần tử cụ thể. Chúng ta có thể thêm nhiều lớp vào thuộc tính bằng cách tách từng lớp bằng dấu cách
Thí dụ
Ở đây hình vuông, chữ đậm và hình dạng là ba loại lớp khác nhau.
5. Bộ chọn thuộc tính CSS
Bộ chọn Thuộc tính CSS định kiểu nội dung theo thuộc tính và giá trị thuộc tính được đề cập trong dấu ngoặc vuông. Không có khoảng trắng nào có thể xuất hiện trước dấu ngoặc vuông mở
________số 8_______Mã CSS này sẽ phù hợp với phần tử HTML sau
Tương tự, nếu giá trị của thuộc tính 'loại' thay đổi, bộ chọn Thuộc tính sẽ không khớp với nó. Ví dụ: bộ chọn sẽ không khớp với thuộc tính nếu giá trị của 'loại' thay đổi từ 'văn bản' thành 'gửi'. Nếu bộ chọn thuộc tính được khai báo chỉ với thuộc tính và không có giá trị thuộc tính, thì nó sẽ khớp với tất cả các thành phần HTML có thuộc tính 'loại', bất kể giá trị là 'văn bản' hay 'gửi'
Thí dụ
ul {
border: solid 1px #ccc;
}Chúng tôi cũng có thể sử dụng các bộ chọn thuộc tính không có đặc điểm kỹ thuật của giá trị bên ngoài dấu ngoặc vuông. Điều này sẽ giúp chúng tôi chỉ nhắm mục tiêu thuộc tính, bất kể phần tử nào. Trong ví dụ của chúng tôi, nó sẽ nhắm mục tiêu dựa trên thuộc tính 'loại', bất kể phần tử 'đầu vào' là gì. Bộ chọn CSS giúp chúng tôi đơn giản hóa mã của mình và cho phép chúng tôi tận dụng và tái sử dụng cùng một mã CSS cho các phần tử HTML khác nhau. Chúng giúp chúng tôi tạo kiểu cho các phân đoạn và phần cụ thể trên trang web của chúng tôi. Họ cung cấp cho chúng tôi tùy chọn tạo kiểu thống nhất cho các yếu tố tương tự trong trang web của chúng tôi. Do đó, bộ chọn CSS là một phần quan trọng trong lộ trình học tập của CSS
Bài viết được đề xuất
Đây là hướng dẫn về Các loại Bộ chọn CSS. Ở đây chúng ta đã thảo luận về các loại bộ chọn CSS khác nhau với các ví dụ tương ứng. Bạn cũng có thể xem qua các bài viết được đề xuất khác của chúng tôi để tìm hiểu thêm –