Tất cả các bộ chọn CSS là gì?

Bộ chọn CSS được sử dụng để chọn nội dung bạn muốn tạo kiểu. Bộ chọn là một phần của bộ quy tắc CSS. Bộ chọn CSS chọn các thành phần HTML theo id, lớp, loại, thuộc tính, v.v.

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

1. Bộ chọn phần tử CSS
2. Bộ chọn Id CSS
3. Bộ chọn lớp CSS
4. Bộ chọn chung CSS
5. Bộ chọn nhóm CSS

1) Bộ chọn phần tử CSS

Bộ chọn phần tử chọn phần tử HTML theo tên

Kiểm tra nó ngay bây giờ

đầu ra

Phong cách này sẽ được áp dụng trên mỗi đoạn văn

Tôi cũng vậy

Và tôi

---

2) Bộ chọn Id CSS

Bộ chọn id chọn thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. Một id luôn là duy nhất trong trang, do đó, nó được chọn để chọn một phần tử duy nhất, duy nhất

Nó được viết bằng ký tự băm (#), theo sau là id của phần tử

Hãy lấy một ví dụ với id "para1"

Kiểm tra nó ngay bây giờ

đầu ra

Xin chào Javatpoint. com

Đoạn này sẽ không bị ảnh hưởng

---

3) Bộ chọn lớp CSS

Bộ chọn lớp chọn các thành phần HTML với một thuộc tính lớp cụ thể. Nó được sử dụng với một ký tự dấu chấm. (ký hiệu dừng hoàn toàn) theo sau là tên lớp

Ghi chú. Tên lớp không được bắt đầu bằng số

Hãy lấy một ví dụ với một lớp "trung tâm"

Kiểm tra nó ngay bây giờ

đầu ra

Tiêu đề này có màu xanh dương và được căn giữa

Đoạn này có màu xanh dương và được căn giữa

---

Bộ chọn lớp CSS cho phần tử cụ thể

Nếu bạn muốn chỉ định rằng chỉ một phần tử HTML cụ thể sẽ bị ảnh hưởng thì bạn nên sử dụng tên phần tử với bộ chọn lớp

Hãy xem một ví dụ

Kiểm tra nó ngay bây giờ

đầu ra

Tiêu đề này không bị ảnh hưởng

Đoạn này có màu xanh dương và được căn giữa

---

4) Bộ chọn chung CSS

Bộ chọn chung được sử dụng làm ký tự đại diện. Nó chọn tất cả các yếu tố trên các trang

Kiểm tra nó ngay bây giờ

đầu ra

Đây là tiêu đề

Phong cách này sẽ được áp dụng trên mỗi đoạn văn

Tôi cũng vậy

Và tôi

---

5) Bộ chọn nhóm CSS

Bộ chọn nhóm được sử dụng để chọn tất cả các phần tử có cùng định nghĩa kiểu

Bộ chọn nhóm được sử dụng để giảm thiểu mã. Dấu phẩy được sử dụng để phân tách từng bộ chọn trong nhóm

Hãy xem mã CSS không có bộ chọn nhóm

Như bạn có thể thấy, bạn cần xác định các thuộc tính CSS cho tất cả các thành phần. Nó có thể được nhóm theo những cách sau

< CSS

Bộ chọn loại

Bộ chọn chung

Bộ chọn thuộc tính

Bộ chọn lớp

Bộ chọn ID

lớp giả

Lớp giả động

Lớp giả mục tiêu

Lớp giả ngôn ngữ

Phần tử giao diện người dùng cho biết các lớp giả

Lớp giả cấu trúc

Lớp giả phủ định

phần tử giả

Bộ kết hợp

Tổ hợp hậu duệ

máy tổ hợp con

Tổ hợp anh chị em liền kề

Bộ kết hợp anh chị em chung

Xem thêm

Bộ chọn CSS chọn (các) phần tử HTML cho mục đích tạo kiểu. Bộ chọn CSS chọn các thành phần HTML theo id, lớp, loại, thuộc tính, v.v.

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ả

Mã HTML. Xem xét mã mẫu để hiểu bộ chọn và cách sử dụng chúng theo cách tốt hơn

HTML

#div-container{
    color: blue;
    background-color: gray;
}

0

#div-container{
    color: blue;
    background-color: gray;
}

1

#div-container{
    color: blue;
    background-color: gray;
}

2

#div-container{
    color: blue;
    background-color: gray;
}

3_______0_______4

#div-container{
    color: blue;
    background-color: gray;
}

5

#div-container{
    color: blue;
    background-color: gray;
}

6

 

#div-container{
    color: blue;
    background-color: gray;
}

1

#div-container{
    color: blue;
    background-color: gray;
}

8

#div-container{
    color: blue;
    background-color: gray;
}

6

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______0_______1

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

2

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

3

#div-container{
    color: blue;
    background-color: gray;
}

4

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

5

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

6

#div-container{
    color: blue;
    background-color: gray;
}

4

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

8

#div-container{
    color: blue;
    background-color: gray;
}

6

* {
  color: white;
  background-color: black;
}

0_______0_______8

#div-container{
    color: blue;
    background-color: gray;
}

6

 

#div-container{
    color: blue;
    background-color: gray;
}

1

* {
  color: white;
  background-color: black;
}

4

#div-container{
    color: blue;
    background-color: gray;
}

6

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______0_______1

* {
  color: white;
  background-color: black;
}

8

#div-container{
    color: blue;
    background-color: gray;
}

6

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0_______30_______1

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______20_______0

* {
  color: white;
  background-color: black;
}

8

#div-container{
    color: blue;
    background-color: gray;
}

6

 

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0

#div-container{
    color: blue;
    background-color: gray;
}

1

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

8

#div-container{
    color: blue;
    background-color: gray;
}

6

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0____41_______1

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

[href] {   background-color: lightgreen;
   color: black;
   font-family: monospace;
   font-size: 1rem;
   }

3

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0____41_______5

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0____41_______7

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

[href] {   background-color: lightgreen;
   color: black;
   font-family: monospace;
   font-size: 1rem;
   }

9

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Class{
Property:Value;
}

1

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0_______51_______3

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0_______51_______5

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Class{
Property:Value;
}

7

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______20_______0

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

8

#div-container{
    color: blue;
    background-color: gray;
}

6

 

 

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______0_______1

h1:hover{
    background-color: aqua;
}

4

h1:hover{
    background-color: aqua;
}

5

#div-container{
    color: blue;
    background-color: gray;
}

4

h1:hover{
    background-color: aqua;
}

7

#div-container{
    color: blue;
    background-color: gray;
}

6

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Element{
Property:Value;
}

0

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Element{
Property:Value;
}

2

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0____41_______5

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0____41_______7

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

[href] {   background-color: lightgreen;
   color: black;
   font-family: monospace;
   font-size: 1rem;
   }

9

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Class{
Property:Value;
}

1

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0_______51_______3

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0_______51_______5

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Class{
Property:Value;
}

7

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______20_______0

h1:hover{
    background-color: aqua;
}

4

#div-container{
    color: blue;
    background-color: gray;
}

6

 

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______0_______1

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

8

#div-container{
    color: blue;
    background-color: gray;
}

04_______0_______4

#div-container{
    color: blue;
    background-color: gray;
}

06

#div-container{
    color: blue;
    background-color: gray;
}

6

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Element{
Property:Value;
}

0

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Element{
Property:Value;
}

2

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0____41_______5

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0____41_______7

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

[href] {   background-color: lightgreen;
   color: black;
   font-family: monospace;
   font-size: 1rem;
   }

9

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Class{
Property:Value;
}

1

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0_______51_______3

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0_______51_______5

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

0

Selector:Pseudo-Class{
Property:Value;
}

7

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

0_______20_______0

#div-container, .paragraph-class, h1{
    color: white;
    background-color: purple;
    font-family: monospace;    
}

8

#div-container{
    color: blue;
    background-color: gray;
}

6

 

#div-container{
    color: blue;
    background-color: gray;
}

30

#div-container{
    color: blue;
    background-color: gray;
}

30_______0_______1

#div-container{
    color: blue;
    background-color: gray;
}

33

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

6

#div-container{
    color: blue;
    background-color: gray;
}

4

#div-container{
    color: blue;
    background-color: gray;
}

36

#div-container{
    color: blue;
    background-color: gray;
}

37

#div-container{
    color: blue;
    background-color: gray;
}

33

#div-container{
    color: blue;
    background-color: gray;
}

6

#div-container{
    color: blue;
    background-color: gray;
}

30_______0_______1

#div-container{
    color: blue;
    background-color: gray;
}

33

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

6

#div-container{
    color: blue;
    background-color: gray;
}

4

#div-container{
    color: blue;
    background-color: gray;
}

36

#div-container{
    color: blue;
    background-color: gray;
}

46

#div-container{
    color: blue;
    background-color: gray;
}

33

#div-container{
    color: blue;
    background-color: gray;
}

6

#div-container{
    color: blue;
    background-color: gray;
}

30_______0_______1

#div-container{
    color: blue;
    background-color: gray;
}

33

.paragraph-class {
    color:white;
    font-family: monospace;
    background-color: purple;
}

6

#div-container{
    color: blue;
    background-color: gray;
}

4

#div-container{
    color: blue;
    background-color: gray;
}

36

#div-container{
    color: blue;
    background-color: gray;
}

55

#div-container{
    color: blue;
    background-color: gray;
}

33

#div-container{
    color: blue;
    background-color: gray;
}

6

* {
  color: white;
  background-color: black;
}

0_______20_______4

#div-container{
    color: blue;
    background-color: gray;
}

6

 

* {
  color: white;
  background-color: black;
}

0_______0_______2

#div-container{
    color: blue;
    background-color: gray;
}

6

Chúng tôi sẽ áp dụng các quy tắc CSS cho mã HTML ở trên

1. bộ chọn phần tử. Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử (hoặc thẻ) ví dụ: p, h1, div, span, v.v.

phong cách. css. Đoạn mã sau được sử dụng trong mã HTML ở trên bằng cách sử dụng bộ chọn Phần tử giả. Quy tắc CSS này sẽ được áp dụng cho thẻ p trên trang

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

4 bộ chọn CSS là gì?

Bộ chọn CSS là gì?

*{} trong CSS là gì?