Các lớp giả CSS được sử dụng để thêm kiểu vào bộ chọn, nhưng chỉ khi những bộ chọn đó đáp ứng các điều kiện nhất định. Một lớp giả được thể hiện bằng cách thêm dấu hai chấm [. ] sau bộ chọn trong CSS, theo sau là lớp giả, chẳng hạn như "hover", "focus" hoặc "active", như thế này
a:hover { /* your style here */ }
Ý tưởng với các lớp giả là bạn có thể cách điệu các phần tử theo cách khác khi người dùng di chuột qua chúng [. di chuột] hoặc gõ vào chúng bằng bàn phím [. tiêu điểm] hoặc tại thời điểm chính xác khi người dùng đang chọn một liên kết [. tích cực]. Bạn cũng có thể cách điệu các liên kết khác đi sau khi người dùng đã truy cập chúng [. đã đến thăm]. Có nhiều lớp giả khác có sẵn. Xem trang Các lớp giả CSS của W3Schools để biết thêm thông tin
Kết quả của người học
Khi hoàn thành bài tập này
- bạn sẽ có thể sử dụng. bay lượn,. tập trung và. các lớp giả CSS đang hoạt động vào một trang web để giúp người dùng theo dõi vị trí hiện tại của họ trên trang
- bạn sẽ có thể sử dụng. lớp giả chữ cái đầu tiên để cách điệu rõ ràng chữ cái đầu tiên của một khối văn bản
Sử dụng các lớp giả CSS để làm nổi bật vị trí của người dùng
Khi người dùng trỏ chuột vào một đối tượng trên trang web, sẽ rất hữu ích nếu đối tượng đó phản hồi theo một cách nào đó. Ví dụ: khi người dùng di chuột qua một liên kết, màu sắc và màu nền của liên kết đó có thể bị đảo ngược. Trong CSS ví dụ sau, tất cả các liên kết trên một trang được cách điệu thành màu đen trên nền trắng, nhưng khi người dùng di chuột qua các màu sẽ bị đảo ngược
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }
Chức năng này làm cho các trang trở nên sống động, phản hồi khi người dùng di chuột quanh trang. Đối với những người đang điều hướng bằng bàn phím [ví dụ: bằng cách nhấn tab để di chuyển qua các liên kết trên trang], chức năng này thậm chí còn quan trọng hơn vì người dùng bàn phím thường rất khó theo dõi vị trí của họ trên trang. Hầu hết các trình duyệt web cung cấp một số dấu hiệu trực quan về phần tử nào hiện đang được đặt tiêu điểm, nhưng trong một số trình duyệt hàng đầu, đây chỉ đơn giản là một đường chấm mỏng rất khó nhìn, nếu không muốn nói là không thể, đặc biệt là trên một số nền nhất định. Để thêm chức năng giống nhau cho cả người dùng bàn phím và chuột, chúng ta chỉ cần thêm. tập trung lớp giả theo định nghĩa trước đây của chúng tôi, như thế này
a { color: black; background-color: white; } a:hover, a:focus { color: white; background-color: black; }
Bây giờ, mỗi khi người dùng điều hướng đến một liên kết trên tập hợp, cho dù họ làm như vậy bằng cách trỏ chuột hay bằng cách nhấn bằng bàn phím, liên kết đó sẽ đảo ngược màu sắc
Ricardo Zea là một Full-Stack Designer đến từ Medellín, Colombia với niềm đam mê thiết kế web, CSS và HTML. Ông là tác giả của hai cuốn sách. Làm chủ … Thông tin thêm về Ricardo ↬
Bản tin email
Email [đập vỡ] của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.
- Giao diện người dùng SmashingConf 2023
- Danh sách kiểm tra thiết kế giao diện thông minh
- Các mẫu thiết kế giao diện thông minh, khóa học 8h-video
- Bắt đầu miễn phí
- Các mẫu thiết kế giao diện Đào tạo UX
- Thử ngay bây giờ
Xin chào tất cả. [Chào mọi người. ]
Trong những ngày đầu thiết kế web, tôi đã phải học mọi thứ một cách khó khăn. phep thử va lôi sai. Không có Smashing Magazine, Can I Use, CodePen hay bất kỳ công cụ tuyệt vời nào khác mà chúng ta sử dụng ngày nay. Nhờ ai đó chỉ cho tôi kiến thức về thiết kế web, đặc biệt là về mặt CSS, sẽ cực kỳ hữu ích
Bây giờ tôi đã có nhiều kinh nghiệm hơn, tôi muốn chia sẻ với bạn một cách rất thân thiện, giản dị và không giáo điều về hướng dẫn tham khảo CSS cho các lớp giả và các phần tử giả
Nếu bạn là nhà thiết kế hoặc nhà phát triển web có kinh nghiệm, bạn phải biết và đã sử dụng hầu hết các lớp giả và phần tử giả được thảo luận ở đây. Tuy nhiên, tôi khuyến khích bạn kiểm tra mục lục;
Trước khi đi sâu vào phần thịt và xương, và vì bài viết này nói về pseudo-class và pseudo-element, hãy bắt đầu với những điều cơ bản. Bạn đã bao giờ tự hỏi từ “giả” có nghĩa là gì chưa? . com
tính từ
1. không thực sự nhưng có sự xuất hiện của; .
2. gần như, tiếp cận, hoặc cố gắng trở thành.
Không quá phức tạp với định nghĩa kỹ thuật của W3C, một lớp giả về cơ bản là trạng thái ảo hoặc đặc điểm cụ thể của một phần tử có thể được nhắm mục tiêu bằng CSS. Một vài lớp giả phổ biến là
a {
@include links[orange, blue, yellow, teal];
}
4, a {
@include links[orange, blue, yellow, teal];
}
5, a {
@include links[orange, blue, yellow, teal];
}
6, a {
@include links[orange, blue, yellow, teal];
}
7, a {
@include links[orange, blue, yellow, teal];
}
8 và a {
@include links[orange, blue, yellow, teal];
}
9. Còn nhiều hơn nữa và chúng ta sẽ thấy tất cả chúng sau một phút nữaNgoài ra, các lớp giả luôn được đặt trước dấu hai chấm [
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
0]. Sau đó là tên của lớp giả và đôi khi là một giá trị trong ngoặc đơn. a {
@include links[orange, blue, yellow, teal];
}
9 có ai không?Bây giờ, các phần tử giả giống như các phần tử ảo mà chúng ta có thể coi như các phần tử HTML thông thường. Vấn đề là chúng không tồn tại trong cây tài liệu hoặc DOM. Điều này có nghĩa là chúng tôi không thực sự nhập các phần tử giả mà tạo chúng bằng CSS
Một vài phần tử giả phổ biến là
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
2, a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
3 và a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
4. Chúng ta sẽ nói về chúng ở cuối bài viết nàyThêm sau khi nhảy. Tiếp tục đọc bên dưới ↓
Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác
Chuyển đến hội thảo ↬Dấu hai chấm đơn hoặc kép cho các phần tử giả?
Câu trả lời ngắn gọn là, trong hầu hết các trường hợp, hoặc
Dấu hai chấm [
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
5] đã được giới thiệu trong CSS3 để phân biệt các phần tử giả như a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
6 và a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
7 với các lớp giả như a {
@include links[orange, blue, yellow, teal];
}
6 và a {
@include links[orange, blue, yellow, teal];
}
7. Tất cả các trình duyệt đều hỗ trợ dấu hai chấm cho phần tử giả ngoại trừ Internet Explorer [IE] 8 trở xuốngTuy nhiên, một số phần tử giả, chẳng hạn như
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }900, chỉ chấp nhận dấu hai chấm
Cá nhân tôi sử dụng ký hiệu dấu hai chấm để CSS của tôi tương thích ngược với các trình duyệt cũ. Tất nhiên, tôi sử dụng ký hiệu dấu hai chấm trên những phần tử giả yêu cầu nó
Bạn được tự do sử dụng;
Tuy nhiên, thông số kỹ thuật, tại thời điểm viết bài này, khuyến nghị sử dụng ký hiệu dấu hai chấm vì lý do đã đề cập ở trên, khả năng tương thích ngược
Xin lưu ý rằng cách CSS3 mới để viết các phần tử giả là sử dụng dấu hai chấm, ví dụ:a { color: black; background-color: white; } a:hover { color: white; background-color: black; }901, để phân biệt chúng với các lớp giả. Đôi khi bạn có thể thấy điều này trong CSS. Tuy nhiên, CSS3 vẫn cho phép các phần tử giả dấu hai chấm đơn lẻ, vì mục đích tương thích ngược và chúng tôi khuyên bạn nên sử dụng cú pháp này trong thời gian này
Trong các tiêu đề của bài viết này, các phần tử giả hỗ trợ cả dấu hai chấm đơn và dấu hai chấm sẽ được hiển thị với cả hai ký hiệu. Các phần tử giả chỉ hỗ trợ dấu hai chấm sẽ được hiển thị như
Khi nào [Không] Sử dụng Nội dung do CSS tạo
Tạo nội dung thông qua CSS đạt được bằng cách kết hợp thuộc tính CSS
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }902 với phần tử giả
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
3 hoặc a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
2“Nội dung” này có thể là văn bản thuần túy hoặc vùng chứa mà chúng tôi thao tác bằng CSS để hiển thị hình dạng đồ họa hoặc yếu tố trang trí. Ở đây, tôi sẽ đề cập đến loại nội dung đầu tiên, văn bản
Nội dung được tạo không nên được sử dụng cho bản sao hoặc văn bản quan trọng, vì những lý do sau
- Nó sẽ không thể truy cập được đối với một số trình đọc màn hình
- Nó sẽ không được lựa chọn
- Nếu nội dung được tạo sử dụng nội dung không cần thiết vì mục đích trang trí, trình đọc màn hình hỗ trợ nội dung được tạo bằng CSS sẽ đọc to nội dung đó, do đó làm cho UX thậm chí còn tệ hơn
Sử dụng nội dung do CSS tạo để trang trí và thông tin không quan trọng, nhưng hãy đảm bảo rằng nội dung đó được trình đọc màn hình xử lý đúng cách để những người sử dụng công nghệ hỗ trợ không bị phân tâm. Hãy nghĩ đến "nâng cao lũy tiến" khi quyết định có sử dụng nội dung do CSS tạo ra hay không
Ở đây trên Tạp chí Smashing, Gabriele Romanato có một bài viết tuyệt vời về việc sử dụng nội dung do CSS tạo ra
Lớp giả thử nghiệm và phần tử giả
Lớp giả hoặc phần tử giả mang tính thử nghiệm có nghĩa là thông số kỹ thuật của nó chưa ổn định hoặc chưa hoàn thiện. Cú pháp và hành vi có thể thay đổi trong tương lai
Tuy nhiên, hiện tại chúng ta có thể sử dụng các lớp giả và phần tử giả thử nghiệm bằng cách áp dụng các tiền tố của nhà cung cấp. Để thực hiện việc này, hãy tham khảo Tôi có thể sử dụng không;
Trong bài viết này, bạn sẽ thấy nhãn "thử nghiệm" bên cạnh tên của lớp giả hoặc phần tử giả có liên quan
### Mục lục [theo thứ tự bảng chữ cái]
- tích cực
- sau đó/. sau đó
- bối cảnh [thử nghiệm]
- trước/. trước
- đã kiểm tra
- mặc định
- dir [thử nghiệm]
- Vô hiệu hóa
- trống rỗng
- kích hoạt
- con đầu lòng
- chữ cái đầu tiên /. chữ cái đầu tiên
- dòng đầu tiên/. dòng đầu tiên
- hạng nhất
- tiêu điểm
- toàn màn hình [thử nghiệm]
- bay lượn
- trong phạm vi
- không xác định
- không hợp lệ
- lang thang
- con cuối cùng
- cuối cùng của loại
- liên kết
- không phải
- con thứ n
- nth-con-cuoi
- nth-cuối cùng của loại
- loại thứ n
- con một
- duy nhất của loại
- không bắt buộc
- ngoài phạm vi
- trình giữ chỗ [thử nghiệm]
- chỉ đọc
- đọc viết
- cần thiết
- nguồn gốc
- lựa chọn
- phạm vi [thử nghiệm]
- Mục tiêu
- có hiệu lực
- đã đến thăm
- Nội dung thưởng. Một mixin Sass cho các liên kết
Được rồi, mọi người, hãy bắt đầu chương trình này
lớp giả
Chúng ta sẽ bắt đầu thảo luận về pseudo-class với những thứ liên quan đến trạng thái
Những trạng thái
Một lớp giả trạng thái thường phát huy tác dụng khi người dùng thực hiện một hành động. Một "hành động" trong CSS cũng có thể là "không có hành động", như trong trường hợp liên kết chưa được truy cập
Hãy kiểm tra xem chúng ra
liên kết
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
4 đại diện cho trạng thái “bình thường” của các liên kết và được sử dụng để chọn các liên kết chưa được truy cập. Nên khai báo lớp giả a {
@include links[orange, blue, yellow, teal];
}
4 trước tất cả các lớp giả khác trong danh mục này. Thứ tự của cả bốn là thế này. a {
@include links[orange, blue, yellow, teal];
}
4, a {
@include links[orange, blue, yellow, teal];
}
5, a {
@include links[orange, blue, yellow, teal];
}
6, a {
@include links[orange, blue, yellow, teal];
}
7a {
@include links[orange, blue, yellow, teal];
}
0Nếu bạn sử dụng nó như sau, nó có thể được bỏ qua
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }9
đã đến thăm
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
5 được sử dụng trong các liên kết đã được truy cập. Vị trí thứ hai của lớp giả a {
@include links[orange, blue, yellow, teal];
}
5 [sau lớp giả a {
@include links[orange, blue, yellow, teal];
}
4]a {
@include links[orange, blue, yellow, teal];
}
5bay lượn
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
6 được sử dụng để tạo kiểu cho một phần tử khi con trỏ của người dùng ở trên nó. Không nhất thiết phải giới hạn các liên kết, mặc dù đó là trường hợp sử dụng phổ biến nhấtNó sẽ xuất hiện thứ ba theo thứ tự [sau lớp giả
a {
@include links[orange, blue, yellow, teal];
}
5]a {
@include links[orange, blue, yellow, teal];
}
8Thử nghiệm
Xem Bút CSS. hover pseudo-class của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. hover pseudo-class của Ricardo Zea[@ricardozea] trên CodePentích cực
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
7 được sử dụng để tạo kiểu cho một phần tử đã được "kích hoạt" bằng thiết bị trỏ hoặc bằng cách nhấn vào thiết bị màn hình cảm ứng. Nó cũng có thể được kích hoạt bởi bàn phím, giống như lớp giả a { color: black; background-color: white; } a:hover { color: white; background-color: black; }917
Nó hoạt động rất giống với
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }917, sự khác biệt là lớp giả
a {
@include links[orange, blue, yellow, teal];
}
7 là một sự kiện xảy ra giữa nút chuột được nhấp và được thả raNó sẽ xuất hiện thứ tư theo thứ tự [sau lớp giả
a {
@include links[orange, blue, yellow, teal];
}
6]a {
@include links[orange, blue, yellow, teal];
}
4tiêu điểm
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }917 được sử dụng để tạo kiểu cho một phần tử đã lấy được tiêu điểm thông qua thiết bị trỏ, từ một cú chạm trên thiết bị màn hình cảm ứng hoặc qua bàn phím. Nó được sử dụng rất nhiều trong các phần tử biểu mẫu
a {
@include links[orange, blue, yellow, teal];
}
6Hoặc
a {
@include links[orange, blue, yellow, teal];
}
7Nội dung thưởng. Một Sass Mixin cho các liên kết
Nếu bạn làm việc với các bộ tiền xử lý CSS, chẳng hạn như Sass, nội dung bổ sung này có thể khiến bạn quan tâm
[Nếu bạn không thích các bộ tiền xử lý CSS - và điều đó không sao cả - bạn có thể bỏ qua phần về các lớp giả cấu trúc. ]
Với tinh thần tối ưu hóa quy trình làm việc của chúng tôi, bên dưới là một mixin Sass mà chúng tôi có thể sử dụng để tạo một bộ liên kết cơ bản
Ý tưởng đằng sau mixin này là không có giá trị mặc định nào được khai báo trong các đối số. Vì vậy, chúng tôi "buộc phải", một cách thân thiện, tuyên bố tất cả bốn trạng thái của các liên kết của chúng tôi
Các lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }917 và
a {
@include links[orange, blue, yellow, teal];
}
7 thường được khai báo cùng nhau. Hãy tách chúng ra nếu bạn thíchLưu ý rằng mixin này có thể được áp dụng cho bất kỳ phần tử HTML nào, không chỉ các liên kết
Đây là hỗn hợp của chúng tôi
a {
@include links[orange, blue, yellow, teal];
}
0Cách sử dụng
a {
@include links[orange, blue, yellow, teal];
}
Biên dịch thành
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
Thử nghiệm
Xem Pen Sass Mixin để biết các liên kết của Ricardo Zea[@ricardozea] trên CodePen
Xem Pen Sass Mixin để biết các liên kết của Ricardo Zea[@ricardozea] trên CodePenCấu trúc
Các lớp giả cấu trúc nhắm mục tiêu thông tin bổ sung trong cây tài liệu hoặc DOM và không thể được biểu diễn bằng một loại bộ chọn hoặc bộ kết hợp khác
con đầu lòng
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
8 đại diện cho phần tử con đầu tiên của phần tử cha của nóTrong ví dụ sau, phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }925 đầu tiên sẽ là phần tử duy nhất có văn bản màu cam
HTML
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }90
CSS
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }91
hạng nhất
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }926 đại diện cho phần tử đầu tiên thuộc loại này trong vùng chứa chính của nó
Trong ví dụ sau, phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }925 đầu tiên và phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }928 đầu tiên sẽ là những phần tử duy nhất có văn bản màu cam
HTML
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }92
CSS
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }93
con cuối cùng
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }929 đại diện cho phần tử con cuối cùng trong vùng chứa chính của nó
Trong ví dụ sau, phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }925 cuối cùng sẽ là phần tử duy nhất có văn bản màu cam
HTML
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }94
CSS
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }95
cuối cùng của loại
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }931 đại diện cho phần tử cuối cùng thuộc loại của nó trong vùng chứa chính của nó
Trong ví dụ sau, các phần tử cuối cùng của
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }925 và cuối cùng của
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }928 sẽ là những phần tử duy nhất có văn bản màu cam
HTML
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }96
CSS
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }97
không phải
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }934 còn được gọi là lớp giả phủ định. Nó chấp nhận một đối số - về cơ bản, một "bộ chọn" khác - bên trong dấu ngoặc đơn. Đối số thực sự có thể là một lớp giả khác
Nó có thể được xâu chuỗi nhưng có thể không chứa bộ chọn
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }934 khác
Trong ví dụ sau, lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }934 khớp với một phần tử không được đại diện bởi đối số
HTML
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }98
CSS
Trong phần sau, tất cả văn bản đều có màu cam, ngoại trừ phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }925 với lớp
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }938
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }99
Bây giờ, chúng ta sẽ xâu chuỗi hai lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }934. Tất cả các phần tử sẽ có chữ màu đen và nền màu vàng, ngoại trừ phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }925 có lớp
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }938 và phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }925 cuối cùng trong danh sách
a {
@include links[orange, blue, yellow, teal];
}
50Thử nghiệm
Xem Bút CSS. không phải lớp giả bởi Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. không phải lớp giả bởi Ricardo Zea[@ricardozea] trên CodePencon thứ n
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
9 nhắm mục tiêu một hoặc nhiều phần tử tùy thuộc vào thứ tự của chúng trong đánh dấuLớp giả này là một trong những lớp giả linh hoạt và mạnh mẽ nhất trong CSS
Tất cả các lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }944 đều có một đối số, đó là một công thức mà chúng ta gõ vào dấu ngoặc đơn. Công thức có thể là một số nguyên duy nhất, một công thức có cấu trúc như
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }945 hoặc từ khóa
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }946 hoặc
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }947
Trong công thức
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }945
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }
949 là một số [được gọi là số nguyên];a { color: black; background-color: white; } a:hover { color: white; background-color: black; }
950 là mộta { color: black; background-color: white; } a:hover { color: white; background-color: black; }
950 theo nghĩa đen [nói cách khác, chúng ta sẽ thực sự gõ chữ cáia { color: black; background-color: white; } a:hover { color: white; background-color: black; }
950 trong công thức];a { color: black; background-color: white; } a:hover { color: white; background-color: black; }
953 là toán tử có thể là dấu cộng [a { color: black; background-color: white; } a:hover { color: white; background-color: black; }
953] hoặc dấu trừ [a { color: black; background-color: white; } a:hover { color: white; background-color: black; }
955];a { color: black; background-color: white; } a:hover { color: white; background-color: black; }
956 cũng là một số nguyên nhưng chỉ bắt buộc nếu một toán tử đang được sử dụng
Sử dụng bảng chữ cái Hy Lạp, đây là một vài ví dụ sử dụng cấu trúc HTML cơ bản sau
a {
@include links[orange, blue, yellow, teal];
}
51CSS
Hãy chọn con thứ hai. Vì vậy, chỉ có “Beta” sẽ có màu cam
a {
@include links[orange, blue, yellow, teal];
}
52Bây giờ, hãy chọn mọi đứa trẻ khác bắt đầu từ đứa trẻ thứ hai. Vì vậy, “Beta,” “Delta,” “Zeta,” “Theta” và “Kappa” sẽ có màu cam
a {
@include links[orange, blue, yellow, teal];
}
53Hãy chọn tất cả các con số chẵn
a {
@include links[orange, blue, yellow, teal];
}
54Hãy chọn mọi đứa trẻ khác, bắt đầu từ đứa trẻ thứ sáu. Vì vậy, “Zeta,” “Theta” và “Kappa” sẽ có màu cam
a {
@include links[orange, blue, yellow, teal];
}
55Thử nghiệm
Xem Bút CSS. lớp giả con thứ n của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả con thứ n của Ricardo Zea[@ricardozea] trên CodePennth-con-cuoi
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }957 về cơ bản hoạt động giống như lớp
a {
@include links[orange, blue, yellow, teal];
}
9 ngoại trừ việc nó chọn các phần tử bắt đầu từ cuối chứ không phải từ đầuCSS
Hãy chọn con thứ hai, bắt đầu từ cuối. Vì vậy, chỉ có “Iota” sẽ có màu cam
a {
@include links[orange, blue, yellow, teal];
}
56Bây giờ, hãy chọn mọi đứa trẻ khác, bắt đầu với đứa trẻ thứ hai từ cuối. Vì vậy, “Iota,” “Eta,” “Epsilon,” “Gamma” và “Alpha” sẽ có màu cam
a {
@include links[orange, blue, yellow, teal];
}
57Hãy chọn tất cả các con chẵn, bắt đầu từ cuối
a {
@include links[orange, blue, yellow, teal];
}
58Hãy chọn mọi đứa trẻ khác, bắt đầu với phần tử thứ sáu từ cuối. Vì vậy, “Epsilon,” “Gamma” và “Alpha” sẽ có màu cam
a {
@include links[orange, blue, yellow, teal];
}
59loại thứ n
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }959 về cơ bản hoạt động giống như lớp
a {
@include links[orange, blue, yellow, teal];
}
9, điểm khác biệt chính là nó cụ thể hơn vì chúng ta đang nhắm mục tiêu một phần tử cụ thể so với các phần tử giống như phần tử có cùng phần tử chaTrong ví dụ sau, tất cả các đoạn thứ hai trong bất kỳ vùng chứa nhất định nào sẽ có màu cam
HTML
a {
@include links[orange, blue, yellow, teal];
}
80CSS
a {
@include links[orange, blue, yellow, teal];
}
81nth-cuối cùng của loại
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }961 hoạt động giống như lớp
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }959, điểm khác biệt là nó bắt đầu đếm từ cuối danh sách, thay vì bắt đầu
Trong ví dụ sau, vì chúng tôi đang bắt đầu từ dưới cùng nên tất cả các đoạn đầu tiên sẽ có màu cam
HTML
a {
@include links[orange, blue, yellow, teal];
}
82CSS
a {
@include links[orange, blue, yellow, teal];
}
83[][#resources-for-nth]Tài nguyên
Tham khảo hai tài nguyên tuyệt vời này khi làm việc với lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }944
- “Trình kiểm tra bộ chọn lớp giả cấu trúc CSS3,” Lea Verou
- “. Người kiểm tra thứ n,” Thủ thuật CSS
con một
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }964 nhắm vào phần tử con duy nhất của phần tử cha
Trong ví dụ sau, phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }965 đầu tiên có một phần tử con duy nhất, phần tử này sẽ được cung cấp văn bản màu cam. Phần tử
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }965 thứ hai có một số con;
HTML
a {
@include links[orange, blue, yellow, teal];
}
84CSS
a {
@include links[orange, blue, yellow, teal];
}
85duy nhất của loại
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }968 nhắm mục tiêu một phần tử không có anh chị em thuộc loại cụ thể đó. Điều này tương tự như
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }964 ngoại trừ việc chúng ta có thể nhắm mục tiêu một phần tử cụ thể và làm cho bộ chọn có ý nghĩa hơn
Trong ví dụ sau,
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }965 đầu tiên có một con duy nhất, sẽ được cung cấp văn bản màu cam
HTML
a {
@include links[orange, blue, yellow, teal];
}
84CSS
a {
@include links[orange, blue, yellow, teal];
}
87Mục tiêu
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }971… tốt, nhắm mục tiêu ID duy nhất của một phần tử và hàm băm trong URL
Trong ví dụ sau, bài viết có ID là
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }972 sẽ được nhắm mục tiêu khi URL trong trình duyệt kết thúc bằng
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }973
URL
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }974
HTML
a {
@include links[orange, blue, yellow, teal];
}
88CSS
a {
@include links[orange, blue, yellow, teal];
}
89Mẹo. Bạn có thể sử dụng tốc ký ________ 1975 thay vì ________ 1976 để đạt được kết quả tương tự
Thẩm định
Các biểu mẫu luôn là nguyên nhân của thiết kế và phát triển web. Với sự trợ giúp của các lớp giả xác thực, chúng tôi có thể làm cho quá trình điền biểu mẫu trở nên mượt mà và dễ chịu hơn
Tuy nhiên, lưu ý rằng mặc dù hầu hết các lớp giả được liệt kê trong phần này hoạt động tốt với các phần tử biểu mẫu, nhưng một số lớp giả cũng có thể được sử dụng với các phần tử HTML khác.
Hãy kiểm tra các lớp giả này
đã kiểm tra
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }977 nhắm mục tiêu các nút radio, hộp kiểm và các thành phần tùy chọn đã được kiểm tra hoặc chọn
Trong ví dụ sau, khi hộp kiểm được chọn, nhãn sẽ được tô sáng, do đó nâng cao trải nghiệm người dùng
Thử nghiệm
Xem Bút CSS. đã kiểm tra lớp giả bởi Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. đã kiểm tra lớp giả bởi Ricardo Zea[@ricardozea] trên CodePenmặc định
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }978 nhắm mục tiêu phần tử mặc định trong một biểu mẫu giữa một nhóm các phần tử tương tự
Trong trường hợp bạn cần nhắm mục tiêu nút mặc định ở dạng không có lớp, bạn có thể sử dụng lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }978
Lưu ý rằng việc cung cấp nút “Đặt lại” hoặc “Xóa” trong biểu mẫu đi kèm với một số vấn đề nghiêm trọng về khả năng sử dụng. Tránh sử dụng nó trừ khi thực sự cần thiết. Các bài viết sau đây giải thích một số lý do tại sao
- “Các nút Đặt lại và Hủy bỏ,” Nielsen Norman Group [2000]
- “Killing the Cancel Button on Forms for Good,” Phong trào UX [2010]
Thử nghiệm
Xem Bút CSS. lớp giả mặc định của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả mặc định của Ricardo Zea[@ricardozea] trên CodePenVô hiệu hóa
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }980 nhắm mục tiêu một phần tử biểu mẫu ở trạng thái bị vô hiệu hóa. Không thể chọn, kiểm tra hoặc kích hoạt một phần tử ở trạng thái bị vô hiệu hóa hoặc lấy tiêu điểm
Trong ví dụ sau, đầu vào cho trường
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }981 bị vô hiệu hóa, vì vậy nó sẽ được hiển thị là 50% trong suốt
HTML
a {
@include links[orange, blue, yellow, teal];
}
40CSS
a {
@include links[orange, blue, yellow, teal];
}
41Mẹo. Không cần sử dụng
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }982 trong phần đánh dấu. Bạn có thể đạt được kết quả tương tự chỉ bằng thuộc tính
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }983. Tuy nhiên, hãy nhớ rằng việc sử dụng
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }982 là bắt buộc trong XHTML
Thử nghiệm
Xem Bút CSS. lớp giả bị vô hiệu hóa bởi Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả bị vô hiệu hóa bởi Ricardo Zea[@ricardozea] trên CodePentrống rỗng
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }985 nhắm mục tiêu các phần tử không có nội dung nào trong đó dưới bất kỳ hình thức nào. Nếu một phần tử có chữ cái, phần tử HTML khác hoặc thậm chí là khoảng trắng thì phần tử đó sẽ không trống
Đây là những gì được coi là trống rỗng và không trống rỗng
- Trống
Không có nội dung hoặc ký tự nào xuất hiện trong một phần tử. Nhận xét HTML bên trong một phần tử không được tính là nội dung trong trường hợp này. - Không trống
Các ký tự sẽ xuất hiện bên trong phần tử. Ngay cả một không gian sẽ được coi là nội dung.
Trong ví dụ sau
- vùng chứa trên cùng có văn bản, vì vậy nó sẽ có nền màu cam;
- vùng chứa thứ hai có một khoảng trống, được coi là nội dung, vì vậy vùng chứa này cũng sẽ có nền màu cam;
- thùng chứa thứ ba không có gì bên trong [nó trống rỗng], vì vậy nó sẽ có nền màu vàng;
- vùng chứa cuối cùng chỉ có một nhận xét HTML [nó cũng trống], vì vậy nó cũng sẽ có nền màu vàng
HTML
a {
@include links[orange, blue, yellow, teal];
}
42CSS
a {
@include links[orange, blue, yellow, teal];
}
43Thử nghiệm
Xem Bút CSS. lớp giả trống của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả trống của Ricardo Zea[@ricardozea] trên CodePenkích hoạt
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }986 nhắm mục tiêu các phần tử được bật. Tất cả các phần tử biểu mẫu được bật theo mặc định — nghĩa là, cho đến khi chúng tôi thêm thuộc tính
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }983 vào phần tử trong phần đánh dấu
Chúng tôi có thể sử dụng kết hợp
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }986 và
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }980 để cung cấp phản hồi trực quan, do đó cải thiện trải nghiệm người dùng
Trong ví dụ sau, sau khi đã bị tắt, đầu vào cho
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }981 được bật và do đó được cung cấp giá trị độ mờ là
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }991 và đường viền màu lục 1 pixel
a {
@include links[orange, blue, yellow, teal];
}
44Mẹo. Không cần sử dụng
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }992 trong phần đánh dấu. Bạn có thể đạt được kết quả tương tự chỉ bằng thuộc tính
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }993. Tuy nhiên, hãy nhớ rằng
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }992 là bắt buộc trong XHTML
Thử nghiệm
Xem Bút CSS. đã bật pseudo-class bởi Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. đã bật pseudo-class bởi Ricardo Zea[@ricardozea] trên CodePentrong phạm vi
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }995 nhắm mục tiêu các phần tử có phạm vi và giá trị của chúng nằm trong phạm vi đã xác định
Trong ví dụ sau, phần tử đầu vào hỗ trợ phạm vi từ 5 đến 10. Các giá trị trong phạm vi này sẽ kích hoạt đường viền màu lục
HTML
a {
@include links[orange, blue, yellow, teal];
}
45CSS
a {
@include links[orange, blue, yellow, teal];
}
46Thử nghiệm
Xem Bút CSS. trong phạm vi và. lớp giả ngoài phạm vi của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. trong phạm vi và. lớp giả ngoài phạm vi của Ricardo Zea[@ricardozea] trên CodePenngoài phạm vi
Các. lớp giả ngoài phạm vi nhắm mục tiêu các phần tử có phạm vi và giá trị của chúng nằm ngoài phạm vi đã xác định
Trong ví dụ sau, phần tử đầu vào hỗ trợ phạm vi từ 1 đến 12. Các giá trị nằm ngoài phạm vi này sẽ kích hoạt đường viền màu cam
HTML
a {
@include links[orange, blue, yellow, teal];
}
47CSS
a {
@include links[orange, blue, yellow, teal];
}
48Thử nghiệm
Xem Bút CSS. trong phạm vi và. lớp giả ngoài phạm vi của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. trong phạm vi và. lớp giả ngoài phạm vi của Ricardo Zea[@ricardozea] trên CodePenkhông xác định
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }996 nhắm mục tiêu các yếu tố đầu vào như nút radio và hộp kiểm không được chọn hoặc không được chọn khi tải trang
Một ví dụ về điều này là khi một trang tải với một nhóm nút radio và không có nút radio mặc định hoặc được chọn trước nào được đặt hoặc khi một hộp kiểm được đặt ở trạng thái
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }997 qua JavaScript
HTML
a {
@include links[orange, blue, yellow, teal];
}
49CSS
a {
@include links[orange, blue, yellow, teal];
}
60Thử nghiệm
Xem Bút CSS. lớp giả không xác định của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả không xác định của Ricardo Zea[@ricardozea] trên CodePencó hiệu lực
Lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }998 nhắm mục tiêu một phần tử biểu mẫu có định dạng chính xác theo định dạng bắt buộc của phần tử đó
Trong ví dụ sau, trường đầu vào
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }999 có cấu trúc email được định dạng chính xác;
a {
@include links[orange, blue, yellow, teal];
}
61Thử nghiệm
Xem Bút CSS. hợp lệ và. lớp giả không hợp lệ của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. hợp lệ và. lớp giả không hợp lệ của Ricardo Zea[@ricardozea] trên CodePenkhông hợp lệ
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
500 nhắm mục tiêu một phần tử biểu mẫu có định dạng không đúng theo định dạng bắt buộc của phần tử đóTrong ví dụ sau, khi trường đầu vào
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }999 có cấu trúc email được định dạng không chính xác, giá trị sẽ được coi là không hợp lệ và do đó, đường viền màu cam sẽ xuất hiện xung quanh trường
a {
@include links[orange, blue, yellow, teal];
}
62Thử nghiệm
Xem Bút CSS. hợp lệ và. lớp giả không hợp lệ của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. hợp lệ và. lớp giả không hợp lệ của Ricardo Zea[@ricardozea] trên CodePenkhông bắt buộc
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
502 nhắm mục tiêu các trường đầu vào không bắt buộc trong biểu mẫu. Nói cách khác, miễn là một đầu vào không có thuộc tính a {
@include links[orange, blue, yellow, teal];
}
503, nó có thể được nhắm mục tiêu với lớp giả a {
@include links[orange, blue, yellow, teal];
}
502Trong ví dụ sau, trường này là tùy chọn. Nó không có thuộc tính
a {
@include links[orange, blue, yellow, teal];
}
503 nên văn bản sẽ có màu xámHTML
a {
@include links[orange, blue, yellow, teal];
}
63CSS
a {
@include links[orange, blue, yellow, teal];
}
64chỉ đọc
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
506 nhắm mục tiêu một phần tử mà người dùng không thể chỉnh sửa. Nó tương tự như lớp giả a { color: black; background-color: white; } a:hover { color: white; background-color: black; }980;
Điều này sẽ hữu ích, ví dụ, trong biểu mẫu mà chúng tôi cần hiển thị thông tin được điền sẵn không thể thay đổi nhưng thông tin đó vẫn cần được hiển thị trong phần tử
a {
@include links[orange, blue, yellow, teal];
}
508 cho mục đích gửiTrong ví dụ sau, phần tử đầu vào có thuộc tính HTML
a {
@include links[orange, blue, yellow, teal];
}
509. Vì vậy, nó có thể được nhắm mục tiêu với lớp giả a {
@include links[orange, blue, yellow, teal];
}
506 mà chúng tôi sẽ sử dụng để cung cấp cho nó văn bản màu xámHTML
a {
@include links[orange, blue, yellow, teal];
}
65CSS
a {
@include links[orange, blue, yellow, teal];
}
66Thử nghiệm
Xem Bút CSS. lớp giả chỉ đọc của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả chỉ đọc của Ricardo Zea[@ricardozea] trên CodePenđọc viết
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
511 nhắm mục tiêu các phần tử mà người dùng có thể chỉnh sửa. Nó cũng có thể hoạt động trên các phần tử có thuộc tính HTML a {
@include links[orange, blue, yellow, teal];
}
512Lớp giả này có thể được kết hợp với lớp giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }917 để nâng cao trải nghiệm người dùng trong một số tình huống nhất định
Trong ví dụ sau, người dùng có thể chỉnh sửa div bằng cách nhấp vào nó. Chúng tôi có thể nâng cao trải nghiệm người dùng bằng cách áp dụng một phong cách cụ thể giúp phân biệt phần nội dung này với phần còn lại, cung cấp gợi ý trực quan cho người dùng rằng nội dung này có thể được chỉnh sửa
HTML
a {
@include links[orange, blue, yellow, teal];
}
67CSS
a {
@include links[orange, blue, yellow, teal];
}
68Thử nghiệm
Xem Bút CSS. lớp giả đọc-ghi của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả đọc-ghi của Ricardo Zea[@ricardozea] trên CodePencần thiết
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
514 nhắm mục tiêu các phần tử đầu vào có thuộc tính HTML a {
@include links[orange, blue, yellow, teal];
}
503Ngoài việc dựa vào dấu hoa thị [*] truyền thống trên nhãn của thành phần đầu vào để biểu thị rằng nó là bắt buộc, chúng ta cũng có thể tạo kiểu cho trường bằng CSS. Về cơ bản, chúng tôi có được những điều tốt nhất của cả hai thế giới
Trong ví dụ sau, trường đầu vào có thuộc tính HTML
a {
@include links[orange, blue, yellow, teal];
}
503. Chúng tôi có thể nâng cao trải nghiệm người dùng bằng cách áp dụng một phong cách cụ thể mang lại dấu hiệu trực quan rằng trường này… tốt, bắt buộcHTML
a {
@include links[orange, blue, yellow, teal];
}
69CSS
a {
@include links[orange, blue, yellow, teal];
}
70Thử nghiệm
Xem Bút CSS. lớp giả được yêu cầu bởi Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả được yêu cầu bởi Ricardo Zea[@ricardozea] trên CodePenphạm vi [Thử nghiệm]
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
517 có ý nghĩa nhất khi nó được gắn với thuộc tính HTML a {
@include links[orange, blue, yellow, teal];
}
518 trong thẻ a {
@include links[orange, blue, yellow, teal];
}
519Nếu không có thuộc tính
a {
@include links[orange, blue, yellow, teal];
}
518 trong thẻ a {
@include links[orange, blue, yellow, teal];
}
519 trong một phần của trang, thì lớp giả a {
@include links[orange, blue, yellow, teal];
}
517 sẽ duyệt qua tất cả các phần tử a {
@include links[orange, blue, yellow, teal];
}
523, về cơ bản là phạm vi mặc định của biểu định kiểuTrong ví dụ sau, khối HTML có biểu định kiểu
a {
@include links[orange, blue, yellow, teal];
}
518 và do đó, tất cả văn bản trong phần tử a {
@include links[orange, blue, yellow, teal];
}
525 thứ hai sẽ được in nghiêngHTML và CSS
a {
@include links[orange, blue, yellow, teal];
}
71Thử nghiệm
Xem Bút CSS. lớp giả phạm vi của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả phạm vi của Ricardo Zea[@ricardozea] trên CodePenNgôn ngữ
Các lớp giả ngôn ngữ liên quan đến văn bản có trên trang. Họ không nhắm mục tiêu bất kỳ phương tiện nào như hình ảnh hoặc video
dir [Thử nghiệm]
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
526 nhắm mục tiêu một phần tử có hướng được chỉ định trong tài liệu. Nói cách khác, để lớp giả a {
@include links[orange, blue, yellow, teal];
}
526 hoạt động, chúng ta cần chỉ định hướng của phần tử có liên quan trong đánh dấu bằng thuộc tính HTML a {
@include links[orange, blue, yellow, teal];
}
528Hai hướng hiện có sẵn và được hỗ trợ.
a {
@include links[orange, blue, yellow, teal];
}
529 [trái sang phải] và a {
@include links[orange, blue, yellow, teal];
}
530 [phải sang trái]Tại thời điểm viết bài này, chỉ có Firefox [với bộ chọn tiền tố ________ 3531] hỗ trợ lớp giả ________ 3526. Điều này rất có thể sẽ thay đổi trong tương lai;
Ghi chú. Kết hợp các phiên bản có tiền tố và không có tiền tố trong một quy tắc sẽ không hoạt động. Chúng ta cần tạo hai quy tắc riêng biệt
Trong ví dụ sau, đoạn văn được viết bằng tiếng Ả Rập [có chữ viết từ phải sang trái];
HTML
a {
@include links[orange, blue, yellow, teal];
}
72CSS
a {
@include links[orange, blue, yellow, teal];
}
73Đoạn văn trong ví dụ sau được viết bằng tiếng Anh [từ trái sang phải];
HTML
a {
@include links[orange, blue, yellow, teal];
}
74CSS
a {
@include links[orange, blue, yellow, teal];
}
75Thử nghiệm
Xem Bút CSS. dir pseudo-class của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. dir pseudo-class của Ricardo Zea[@ricardozea] trên CodePenlang thang
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
533 khớp với ngôn ngữ của một phần tử như được xác định bởi sự kết hợp của thuộc tính HTML a {
@include links[orange, blue, yellow, teal];
}
534, phần tử a {
@include links[orange, blue, yellow, teal];
}
535 tương ứng và thông tin thu được từ giao thức, chẳng hạn như tiêu đề HTTPThuộc tính HTML
a {
@include links[orange, blue, yellow, teal];
}
534 thường được sử dụng trong thẻ a {
@include links[orange, blue, yellow, teal];
}
523, nhưng nó cũng có thể được sử dụng trong bất kỳ thẻ nào khác nếu cầnTrên một lưu ý tiếp tuyến, một thực tế phổ biến là thêm dấu ngoặc kép thích hợp vào một ngôn ngữ cụ thể bằng cách sử dụng thuộc tính CSS
a {
@include links[orange, blue, yellow, teal];
}
538. Tuy nhiên, tác nhân người dùng [UA] của hầu hết các trình duyệt [bao gồm IE 9 trở lên] có thể tự động thêm dấu ngoặc kép thích hợp trong trường hợp chúng không được khai báo trong CSSTùy thuộc vào trường hợp của bạn, điều này có thể ổn hoặc có thể không ổn vì có sự khác biệt giữa dấu ngoặc kép mặc định do UA của trình duyệt thêm vào và dấu ngoặc kép thường được sử dụng được thêm qua CSS
Ví dụ: dấu ngoặc kép tiếng Đức [
a {
@include links[orange, blue, yellow, teal];
}
539] được thêm bởi UA của trình duyệt trông như thế này“Lorem ipsum dolor sit amet. “
Tuy nhiên, trong hầu hết các ví dụ được tìm thấy trên web nơi dấu ngoặc kép được khai báo thông qua CSS, dấu ngoặc kép của Đức trông như thế này
»Lorem ipsum dolor sit amet. «
Cả hai đều thực sự đúng. Vì vậy, bạn sẽ phải quyết định xem có nên để UA thêm dấu ngoặc kép hay tự thêm chúng qua CSS bằng cách sử dụng lớp giả
a {
@include links[orange, blue, yellow, teal];
}
533 và thuộc tính CSS a {
@include links[orange, blue, yellow, teal];
}
538Hãy thêm dấu ngoặc kép bằng CSS
HTML
a {
@include links[orange, blue, yellow, teal];
}
76CSS
a {
@include links[orange, blue, yellow, teal];
}
77Thử nghiệm
Xem Bút CSS. lớp giả lang của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả lang của Ricardo Zea[@ricardozea] trên CodePenĐiều khoản khác
Hãy cùng khám phá một số pseudo-class với các chức năng khác
nguồn gốc
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
542 đề cập đến phần tử cha cao nhất trong tài liệuTrong hầu hết các trường hợp, lớp giả
a {
@include links[orange, blue, yellow, teal];
}
542 sẽ đề cập đến phần tử a {
@include links[orange, blue, yellow, teal];
}
523 trong tài liệu HTML. Tuy nhiên, nó có thể đề cập đến một phần tử khác nếu nó được sử dụng trong một ngôn ngữ đánh dấu khác, chẳng hạn như SVG hoặc XMLHãy thêm một màu nền đồng nhất vào phần tử
a {
@include links[orange, blue, yellow, teal];
}
523, phần tử cha cao nhất trong tài liệu HTMLa {
@include links[orange, blue, yellow, teal];
}
78Ghi chú. Chúng tôi có thể đạt được hiệu ứng tương tự nếu chúng tôi đã sử dụng
a {
@include links[orange, blue, yellow, teal];
}
523 làm bộ chọn. Tuy nhiên, a {
@include links[orange, blue, yellow, teal];
}
542, giống như một lớp, có tính đặc hiệu cao hơn bộ chọn phần tử [trong trường hợp này là a {
@include links[orange, blue, yellow, teal];
}
523]toàn màn hình [Thử nghiệm]
Lớp giả
a {
@include links[orange, blue, yellow, teal];
}
549 nhắm mục tiêu các phần tử được hiển thị ở chế độ toàn màn hìnhTuy nhiên, nó không hoạt động khi người dùng nhấn F11 để vào chế độ toàn màn hình trong trình duyệt của họ. Thay vào đó, nó nhằm mục đích hoạt động với API toàn màn hình JavaScript, được hướng đến hình ảnh, video và trò chơi được thực thi trong vùng chứa chính
Cách để biết liệu chúng tôi đã vào chế độ toàn màn hình hay chưa là khi một thông báo xuất hiện ở đầu trình duyệt cho chúng tôi biết điều đó và khi nhấn phím
a {
@include links[orange, blue, yellow, teal];
}
550 sẽ đưa chúng tôi trở lại trang bình thường. Ví dụ: chúng tôi thấy điều này khi tối đa hóa video trong YouTube hoặc VimeoNếu bạn dự định sử dụng lớp giả
a {
@include links[orange, blue, yellow, teal];
}
549, hãy nhớ rằng các trình duyệt có phong cách rất khác nhau. Ngoài ra, bạn sẽ phải xử lý các tiền tố của trình duyệt không chỉ trong CSS mà còn trong JavaScript của bạn. Tôi khuyên bạn nên sử dụng toàn màn hình của Hernan Rajchert. js, giải quyết hầu hết các yêu cầu của trình duyệtAPI toàn màn hình nằm ngoài phạm vi của bài viết này, nhưng đây là một đoạn mã sẽ hoạt động trong trình duyệt WebKit và Blink
HTML
a {
@include links[orange, blue, yellow, teal];
}
79CSS
a {
@include links[orange, blue, yellow, teal];
}
00Thử nghiệm
Xem Bút CSS. lớp giả toàn màn hình của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. lớp giả toàn màn hình của Ricardo Zea[@ricardozea] trên CodePenPhần tử giả
Như đã đề cập ở đầu bài viết này, các phần tử giả giống như các phần tử ảo mà chúng ta có thể coi như các phần tử HTML thông thường. Chúng không tồn tại trong cây tài liệu hoặc DOM, điều đó có nghĩa là chúng tôi không thực sự nhập các phần tử giả trong HTML, mà tạo chúng bằng CSS
Ngoài ra, sự khác biệt giữa dấu hai chấm [
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
5] và dấu hai chấm đơn [a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
0] chỉ là sự khác biệt trực quan giữa CSS 2. 1 và các phần tử giả CSS3. Bạn được tự do sử dụng một trong haitrước/. trước
Phần tử giả
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
3, giống như người anh em của nó là a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
2, thêm nội dung [văn bản hoặc hình dạng] vào một phần tử HTML khác. Một lần nữa, nội dung này không thực sự có trong DOM nhưng có thể được thao tác như thể nó là. Và thuộc tính a { color: black; background-color: white; } a:hover { color: white; background-color: black; }902 cần được khai báo trong CSS
Hãy nhớ rằng không thể chọn văn bản được thêm bằng phần tử giả này
HTML
a {
@include links[orange, blue, yellow, teal];
}
01CSS
a {
@include links[orange, blue, yellow, teal];
}
02Điều này sẽ làm cho như vậy
a {
@include links[orange, blue, yellow, teal];
}
03Ghi chú. Xem khoảng trống sau từ “Xin chào”?
sau đó/. sau đó
Phần tử giả
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
2 được sử dụng để thêm nội dung [văn bản hoặc hình dạng] vào một phần tử HTML khác. Nội dung này không thực sự có trong DOM, nhưng nó có thể được thao tác như thể nó là. Để nó hoạt động, thuộc tính a { color: black; background-color: white; } a:hover { color: white; background-color: black; }902 cần được khai báo trong CSS
Lưu ý rằng không thể chọn bất kỳ văn bản nào được thêm bằng lớp giả này
HTML
a {
@include links[orange, blue, yellow, teal];
}
01CSS
a {
@include links[orange, blue, yellow, teal];
}
05Điều này sẽ làm cho như vậy
a {
@include links[orange, blue, yellow, teal];
}
06phông nền [Thử nghiệm]
Phần tử giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }900 là một hộp được tạo phía sau phần tử toàn màn hình nhưng nằm trên tất cả nội dung khác. Nó được sử dụng kết hợp với lớp giả
a {
@include links[orange, blue, yellow, teal];
}
549 để thay đổi màu nền của màn hình được phóng to — trong trường hợp bạn không muốn sử dụng màu đen mặc địnhGhi chú. Phần tử giả
a { color: black; background-color: white; } a:hover { color: white; background-color: black; }900 yêu cầu dấu hai chấm;
Hãy tiếp tục ví dụ của chúng ta từ lớp giả
a {
@include links[orange, blue, yellow, teal];
}
549HTML
a {
@include links[orange, blue, yellow, teal];
}
79CSS
a {
@include links[orange, blue, yellow, teal];
}
08Thử nghiệm
Xem Bút CSS. yếu tố giả phông nền của Ricardo Zea[@ricardozea] trên CodePen
Xem Bút CSS. yếu tố giả phông nền của Ricardo Zea[@ricardozea] trên CodePenchữ cái đầu tiên /. chữ cái đầu tiên
Phần tử giả
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
4 chọn chữ cái đầu tiên trong một dòng văn bảnNếu một phần tử được bao gồm trước dòng đó, chẳng hạn như hình ảnh, video hoặc bảng, thì chữ cái đầu tiên không bị ảnh hưởng và vẫn có thể được chọn
Đây là một tính năng tuyệt vời để sử dụng trong các đoạn văn, chẳng hạn như để nâng cao sức hấp dẫn của kiểu chữ mà không cần phải dùng đến hình ảnh hoặc nội dung bên ngoài
Mẹo. Đối với văn bản được tạo bằng phần tử giả
a {
color: orange;
}
a:visited {
color: blue;
}
a:hover {
color: yellow;
}
a:active, a:focus {
color: teal;
}
3, chữ cái đầu tiên của văn bản đó sẽ được nhắm mục tiêu, mặc dù nó không có trong DOMCSS
a {
@include links[orange, blue, yellow, teal];
}
09dòng đầu tiên/. dòng đầu tiên
Phần tử giả
a {
@include links[orange, blue, yellow, teal];
}
565 nhắm vào dòng đầu tiên của phần tử. Nó chỉ hoạt động trên các phần tử cấp khối, không phải phần tử nội tuyếnVí dụ: khi được sử dụng trong một đoạn văn, chỉ dòng đầu tiên của đoạn văn đó sẽ được tạo kiểu, ngay cả khi văn bản bao quanh
CSS
a {
@include links[orange, blue, yellow, teal];
}
0lựa chọn
Phần tử giả
a {
@include links[orange, blue, yellow, teal];
}
566 được sử dụng để tạo kiểu cho phần tài liệu đã được đánh dấuCho đến khi có thông báo mới, các trình duyệt dựa trên Gecko yêu cầu phiên bản có tiền tố.
a {
@include links[orange, blue, yellow, teal];
}
567Ghi chú. Kết hợp các phiên bản có tiền tố và không có tiền tố trong một quy tắc sẽ không hoạt động. Chúng ta cần tạo hai quy tắc riêng biệt
CSS
a {
@include links[orange, blue, yellow, teal];
}
1trình giữ chỗ [Thử nghiệm]
Phần tử giả
a {
@include links[orange, blue, yellow, teal];
}
568 nhắm mục tiêu văn bản giữ chỗ được sử dụng trong phần tử biểu mẫu thông qua thuộc tính HTML a {
@include links[orange, blue, yellow, teal];
}
569Nó cũng có thể được viết là
a {
@include links[orange, blue, yellow, teal];
}
570, đây thực sự là cú pháp được sử dụng trong CSSGhi chú. Phần tử giả này không phải là một phần của tiêu chuẩn và việc triển khai phần tử này rất có thể sẽ thay đổi trong tương lai, vì vậy hãy thận trọng khi sử dụng
Trong một số trình duyệt [IE 10 và Firefox cho đến phiên bản 18], phần tử giả
a {
@include links[orange, blue, yellow, teal];
}
568 được triển khai giống như một lớp giả. Tất cả các trình duyệt khác coi nó như một phần tử giả. Vì vậy, trừ khi bạn phải hỗ trợ các phiên bản Firefox hoặc IE 10 cũ, bạn sẽ viết như sauHTML
a {
@include links[orange, blue, yellow, teal];
}
2CSS
a {
@include links[orange, blue, yellow, teal];
}
3Phần kết luận
Phù. Đó là một cái gì đó, phải không?
Các lớp giả CSS và các phần tử giả chắc chắn là một số ít, phải không? . Nhưng đó là cuộc sống của một nhà thiết kế và phát triển web
Đảm bảo kiểm tra kỹ lưỡng. Các lớp giả và phần tử giả được triển khai tốt sẽ đi một chặng đường dài
Tôi hy vọng bạn thích bài viết tham khảo rộng rãi này nhiều như tôi đã viết nó. Và đừng quên đánh dấu nó