Các bộ chọn css khác nhau là gì?

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

1. Bộ chọn chung CSS
2. Bộ chọn phần tử CSS
3. Bộ chọn Id CSS
4. Bộ chọn lớp CSS
5. 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
tag and another
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. Usually, these changes do not apply to the content of 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

is just an example. We can write the ID attribute for any HTML tag. The ID Selector matches the ID attribute within the element and looks for its styling. In our example, the styling applies as long as any element contains the ID attribute ‘box’.

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;
}

0

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 –

5 loại bộ chọn CSS là gì?

Có nhiều loại bộ chọn cơ bản khác nhau. .

Bộ chọn phần tử

bộ chọn id

Bộ chọn lớp

Bộ chọn chung

Bộ chọn nhóm

Bộ chọn thuộc tính

Bộ chọn lớp giả

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

Ví dụ về các loại bộ chọn khác nhau trong CSS là gì?

Có một số loại bộ chọn khác nhau trong CSS. .

Bộ chọn phần tử CSS

Bộ chọn Id CSS

Bộ chọn lớp CSS

Bộ chọn chung CSS

Bộ chọn nhóm CSS

Có bao nhiêu loại bộ chọn khác nhau trong CSS?

Có 6 loại bộ chọn CSS

Bộ chọn CSS đơn giản là gì?

Bộ chọn đơn giản là có thể là bộ chọn loại hoặc bộ chọn phổ quát theo ngay lập tức bởi 0 hoặc nhiều bộ chọn thuộc tính, bộ chọn ID hoặc lớp giả theo bất kỳ thứ tự nào. The simple selector matches if all of its components match. Note: the terminology used here in CSS 2.2 is different from what is used in CSS3.

Đọc tiếp