Sau đây là danh sách các bộ chọn CSS phổ biến và được hỗ trợ tốt nhất. Còn nhiều, rất nhiều nữa, nhưng đây là những cái bạn nên biết rõ
Bộ chọn loại phần tử
Bộ chọn CSS cơ bản nhất là Bộ chọn loại phần tử. Đó là một cái tên ưa thích chỉ đơn giản là sử dụng thẻ HTML, không có dấu ngoặc nhọn
Chúng tôi đã sử dụng rộng rãi bộ chọn này rồi
Ví dụ: nếu chúng tôi muốn làm cho tất cả các đoạn văn có văn bản màu xanh lá cây, chúng tôi sẽ sử dụng quy tắc CSS sau
________0Bộ chọn hậu duệ
Khớp một phần tử là hậu duệ của một phần tử khác
Điều này sử dụng hai bộ chọn riêng biệt, được phân tách bằng dấu cách
Ví dụ: nếu chúng tôi muốn tất cả văn bản được nhấn mạnh trong đoạn văn của mình là văn bản màu xanh lá cây, chúng tôi sẽ sử dụng quy tắc CSS sau
p em { color: green; }0Bộ chọn lớp
Khớp một phần tử có lớp được chỉ định
Để khớp với một thuộc tính cụ thể của p em { color: green; }1, chúng tôi luôn bắt đầu bộ chọn bằng một dấu chấm, để biểu thị rằng chúng tôi đang tìm kiếm một giá trị p em { color: green; }1. Theo sau khoảng thời gian là giá trị thuộc tính lớp mà chúng tôi muốn so khớp
Ví dụ: nếu chúng tôi muốn tất cả các thành phần có lớp "tô sáng" có màu nền khác, chúng tôi sẽ sử dụng quy tắc CSS sau
p em { color: green; }3bộ chọn id
So khớp một phần tử có id đã chỉ định
Để khớp với một thuộc tính cụ thể của p em { color: green; }4, chúng tôi luôn bắt đầu bộ chọn bằng ký hiệu băm (#) để biểu thị rằng chúng tôi đang tìm kiếm một giá trị p em { color: green; }4. Hàm băm được theo sau bởi giá trị thuộc tính mà chúng tôi muốn khớp. Hãy nhớ rằng chúng ta chỉ có thể sử dụng cùng một giá trị thuộc tính p em { color: green; }4 một lần, vì vậy bộ chọn id sẽ luôn chỉ khớp với một thành phần trong tài liệu của chúng ta
Ví dụ: nếu chúng tôi muốn phần tử có id là "nội dung", chúng tôi sẽ sử dụng quy tắc CSS sau
p em { color: green; }7bộ chọn con
So khớp một phần tử là con trực tiếp của một phần tử khác
Ví dụ: nếu chúng tôi muốn tất cả văn bản được nhấn mạnh trong đoạn văn của mình có văn bản màu xanh lá cây, nhưng không có văn bản được nhấn mạnh trong các thành phần khác, chúng tôi sẽ sử dụng quy tắc CSS sau
p em { color: green; }8Ghi chú. Bộ chọn này không hoạt động trong Internet Explorer 6
Bộ chọn anh chị em liền kề
So khớp một phần tử ngay sau phần tử khác, nhưng không phải là phần tử con của nó
Ví dụ: nếu chúng tôi muốn tất cả các đoạn ngay sau h4 có văn bản màu xanh lá cây, nhưng không phải các đoạn khác, chúng tôi sẽ sử dụng quy tắc CSS sau
p em { color: green; }9Ghi chú. Bộ chọn này không hoạt động trong Internet Explorer 6
Bộ chọn giả
Thông tin khác về các trạng thái liên kết
Các yếu tố neo là đặc biệt. Bạn có thể tạo kiểu cho phần tử bằng Bộ chọn loại phần tử, nhưng nó có thể không thực hiện chính xác những gì bạn mong đợi. Điều này là do các liên kết có các trạng thái khác nhau, liên quan đến cách chúng được tương tác với. Bốn trạng thái chính của một liên kết là. liên kết, đã truy cập, di chuột, đang hoạt động
Bộ chọn giả có nhiều kích cỡ và hình dạng khác nhau. Cho đến nay, các bộ chọn giả phổ biến nhất được sử dụng để tạo kiểu cho các liên kết của chúng tôi. Có bốn bộ chọn giả khác nhau được sử dụng cùng với các liên kết
linkMột liên kết chưa được truy cập trước đó (được truy cập được xác định bởi lịch sử trình duyệt). đã truy cậpMột liên kết đã được truy cập. hoverMột liên kết mà con trỏ chuột đang "lơ lửng" trên. đang hoạt độngMột liên kết hiện đang được nhấp vào.highlight { background-color: #ffcccc; }0Vì lý do tương thích với trình duyệt, bạn phải luôn chỉ định bộ chọn giả theo thứ tự này. Một cách dễ dàng để ghi nhớ điều này là sử dụng phương pháp ghi nhớ. "Yêu Hà. "
Ghi chú. Thiết bị màn hình cảm ứng không có trạng thái di chuột. Xem No Hover của Trent Walton để biết thêm thông tin về tình trạng khó sử dụng thú vị này
Bạn có thể đọc thêm về các loại bộ chọn giả khác trên trang sitepoint
Bộ chọn chung
Phù hợp với mọi yếu tố trên trang
Ví dụ: nếu chúng tôi muốn mọi phần tử có đường viền rộng 1px, chúng tôi sẽ sử dụng quy tắc CSS sau
.highlight { background-color: #ffcccc; }1Vì những lý do có thể rõ ràng sau ví dụ trước, bạn nên cẩn thận với bộ chọn chung. Khi nào bạn có thể muốn sử dụng chúng?
Câu trả lời là, không thường xuyên. Nhưng một ví dụ sẽ là đặt lề và phần đệm cho tất cả các phần tử trên trang thành 0. Chúng ta sẽ tìm hiểu một cách tốt hơn để làm điều này trong thời gian ngắn
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#div-container{ color: blue; background-color: gray; }4_______12_______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_______12_______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_______12_______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_______12_______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____42_______1
.paragraph-class { color:white; font-family: monospace; background-color: purple; }0_______32_______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_______53_______1
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______3
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______5
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______7
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______9
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______63_______1
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____63_______3
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______63_______5
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____63_______7
.paragraph-class { color:white; font-family: monospace; background-color: purple; }0_______32_______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_______12_______1h1:hover{ background-color: aqua; }4 h1:hover{ background-color: aqua; }5#div-container{ color: blue; background-color: gray; }4h1: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____82_______0
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____82_______2
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______5
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______7
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______9
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______63_______1
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____63_______3
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______63_______5
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____63_______7
.paragraph-class { color:white; font-family: monospace; background-color: purple; }0_______32_______0h1:hover{ background-color: aqua; }4#div-container{ color: blue; background-color: gray; }6
.paragraph-class { color:white; font-family: monospace; background-color: purple; }0_______12_______1#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }8 #div-container{ color: blue; background-color: gray; }04#div-container{ color: blue; background-color: gray; }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____82_______0
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____82_______2
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______5
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______7
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______53_______9
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______63_______1
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____63_______3
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0_______63_______5
#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; }0____63_______7
.paragraph-class { color:white; font-family: monospace; background-color: purple; }0_______32_______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#div-container{ color: blue; background-color: gray; }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#div-container{ color: blue; background-color: gray; }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#div-container{ color: blue; background-color: gray; }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_______32_______4#div-container{ color: blue; background-color: gray; }6
* { color: white; background-color: black; }0_______12_______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