Di chuột có phải là phần tử giả trong CSS không?

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ờ

CSS pseudo-classes và pseudo-elements chắc chắn có thể là một số ít. Chúng cung cấp rất nhiều khả năng mà người ta có thể dễ dàng cảm thấy choáng ngợp, nhưng đó là cuộc sống của một nhà thiết kế và phát triển web. Hướng dẫn này sẽ giúp bạn tìm hiểu về tất cả những điều bạn cần ghi nhớ để các lớp giả và phần tử giả của bạn được triển khai tốt

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

Ngoà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ày

Thê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ống

Tuy 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);
}

7

a {
    @include links(orange, blue, yellow, teal);
}

0

Nế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);
}

5

bay 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ất

Nó 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);
}

8

Thử 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 CodePen

tí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ả ra

Nó 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);
}

4

tiê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);
}

6

Hoặc

a {
    @include links(orange, blue, yellow, teal);
}

7

Nộ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ích

Lư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);
}

0

Cá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 CodePen

Cấ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);
}

50

Thử 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 CodePen

con 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ấu

Lớ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ột

    a {
      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ái

    a {
      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);
}

51

CSS

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);
}

52

Bâ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);
}

53

Hãy chọn tất cả các con số chẵn

a {
    @include links(orange, blue, yellow, teal);
}

54

Hã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);
}

55

Thử 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 CodePen

nth-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ừ đầu

CSS

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);
}

56

Bâ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);
}

57

Hãy chọn tất cả các con chẵn, bắt đầu từ cuối

a {
    @include links(orange, blue, yellow, teal);
}

58

Hã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);
}

59

loạ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ử cha

Trong 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);
}

80

CSS

a {
    @include links(orange, blue, yellow, teal);
}

81

nth-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);
}

82

CSS

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);
}

84

CSS

a {
    @include links(orange, blue, yellow, teal);
}

85

duy 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);
}

84

CSS

a {
    @include links(orange, blue, yellow, teal);
}

87

Mụ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);
}

88

CSS

a {
    @include links(orange, blue, yellow, teal);
}

89

Mẹ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 CodePen

mặ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 CodePen

Vô 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);
}

40

CSS

a {
    @include links(orange, blue, yellow, teal);
}

41

Mẹ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 CodePen

trố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);
}

42

CSS

a {
    @include links(orange, blue, yellow, teal);
}

43

Thử 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 CodePen

kí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);
}

44

Mẹ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 CodePen

trong 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);
}

45

CSS

a {
    @include links(orange, blue, yellow, teal);
}

46

Thử 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 CodePen

ngoà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);
}

47

CSS

a {
    @include links(orange, blue, yellow, teal);
}

48

Thử 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 CodePen

khô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);
}

49

CSS

a {
    @include links(orange, blue, yellow, teal);
}

60

Thử 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 CodePen

có 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);
}

61

Thử 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 CodePen

khô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);
}

62

Thử 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 CodePen

khô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);
}

502

Trong 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ám

HTML

a {
    @include links(orange, blue, yellow, teal);
}

63

CSS

a {
    @include links(orange, blue, yellow, teal);
}

64

chỉ đọ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ửi

Trong 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ám

HTML

a {
    @include links(orange, blue, yellow, teal);
}

65

CSS

a {
    @include links(orange, blue, yellow, teal);
}

66

Thử 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);
}

512

Lớ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);
}

67

CSS

a {
    @include links(orange, blue, yellow, teal);
}

68

Thử 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 CodePen

cầ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);
}

503

Ngoà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ộc

HTML

a {
    @include links(orange, blue, yellow, teal);
}

69

CSS

a {
    @include links(orange, blue, yellow, teal);
}

70

Thử 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 CodePen

phạ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);
}

519

Nế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ểu

Trong 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êng

HTML và CSS

a {
    @include links(orange, blue, yellow, teal);
}

71

Thử 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 CodePen

Ngô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);
}

528

Hai 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);
}

72

CSS

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);
}

74

CSS

a {
    @include links(orange, blue, yellow, teal);
}

75

Thử 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 CodePen

lang 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 đề HTTP

Thuộ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ần

Trê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 CSS

Tù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);
}

538

Hãy thêm dấu ngoặc kép bằng CSS

HTML

a {
    @include links(orange, blue, yellow, teal);
}

76

CSS

a {
    @include links(orange, blue, yellow, teal);
}

77

Thử 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ệu

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

Hã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 HTML

a {
    @include links(orange, blue, yellow, teal);
}

78

Ghi 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ình

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

Nế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ệt

API 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);
}

79

CSS

a {
    @include links(orange, blue, yellow, teal);
}

00

Thử 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 CodePen

Phầ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 hai

trướ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);
}

01

CSS

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);
}

03

Ghi 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);
}

01

CSS

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);
}

06

phô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 định

Ghi 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);
}

549

HTML

a {
    @include links(orange, blue, yellow, teal);
}

79

CSS

a {
    @include links(orange, blue, yellow, teal);
}

08

Thử 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 CodePen

chữ 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ản

Nế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 DOM

CSS

a {
    @include links(orange, blue, yellow, teal);
}

09

dò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ến

Ví 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);
}

0

lự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ấu

Cho đế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);
}

567

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

CSS

a {
    @include links(orange, blue, yellow, teal);
}

1

trì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);
}

569

Nó 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 CSS

Ghi 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ư sau

HTML

a {
    @include links(orange, blue, yellow, teal);
}

2

CSS

a {
    @include links(orange, blue, yellow, teal);
}

3

Phầ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ó

Di chuột là lớp giả?

CSS giả là gì

Di chuột được gọi trong CSS là gì?

Lớp giả và phần tử giả trong CSS là gì?