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
________0
Bộ 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; }0
Bộ 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; }3
bộ 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; }7
bộ 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; }8
Ghi 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; }9
Ghi 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; }0
Vì 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; }1
Vì 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 lớp giả :only-of-type
trong CSS đại diện cho bất kỳ phần tử nào không có anh chị em của loại đã cho
p:only-of-type {
color: red;
}
Nếu không có thẻ nào đứng trước bộ chọn, nó sẽ khớp với bất kỳ thẻ nào [e. g. :only-of-type
]. Nếu một bộ chọn khác đứng trước nó, nó sẽ khớp dựa trên loại thẻ mà bộ chọn đó khớp. Ví dụ: .example:only-of-type
sẽ hoạt động giống như p:only-of-type
nếu .example
được áp dụng cho một thành phần đoạn văn
Ví dụ đơn giản
Một danh sách chỉ chứa một mục danh sách. Một danh sách khác chứa ba mục danh sách. Chúng tôi có thể nhắm mục tiêu mục danh sách chỉ có một mình với :only-of-type
Check out this Pen!
Mặc dù có lẽ đó không phải là ví dụ tốt nhất, bởi vì :only-child
sẽ hoạt động tốt ở đó vì các mục danh sách là con duy nhất có thể có của danh sách. Thay vào đó, nếu chúng tôi sử dụng div, chúng tôi có thể nhắm mục tiêu một đoạn bên trong div nếu đó là đoạn duy nhất, mặc dù các phần tử khác cũng ở trong đó
Check out this Pen!
Cần lưu ý
Để giải trí, bạn có thể đạt được lựa chọn tương tự như :only-of-type
với
Check out this Pen!1 hoặc
Check out this Pen!2. Tuy nhiên, chúng sử dụng hai bộ chọn chuỗi, có nghĩa là độ đặc hiệu gấp đôi so với
:only-of-type