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