Hướng dẫn dứt khoát cho các lớp giả CSS
Cho dù bạn là người mới hay nhà phát triển CSS có kinh nghiệm, có lẽ bạn đã nghe nói về lớp giả. Lớp giả nổi tiếng nhất có lẽ là :bay lượn, cho phép chúng ta tạo kiểu cho một phần tử khi nó ở trạng thái di chuột, tức là khi một thiết bị con trỏ, chẳng hạn như chuột, được chỉ vào nó.
Theo khái niệm về các bài đăng trước đây của chúng tôi về lề: auto và CSS Floats, chúng tôi sẽ xem xét kỹ hơn về các lớp giả trong bài đăng này. Chúng ta sẽ thấy những lớp giả thực sự là gì, cách chúng hoạt động, cách chúng ta có thể phân loại chúng và chúng khác với các yếu tố giả như thế nào.
Lớp học giả là gì?
Lớp giả là một từ khóa chúng ta có thể thêm vào các bộ chọn CSS để xác định một trạng thái đặc biệt của phần tử HTML thuộc. Chúng ta có thể thêm lớp giả vào bộ chọn CSS bằng cách sử dụng cú pháp dấu hai chấm : như thế này: a: hover '
Một lớp CSS là một thuộc tính mà chúng ta có thể thêm vào các phần tử HTML mà chúng ta muốn áp dụng các quy tắc kiểu tương tự cho, chẳng hạn như các mục menu trên cùng hoặc tiêu đề của các tiện ích thanh bên. Nói cách khác, chúng ta có thể sử dụng các lớp CSS để nhóm hoặc phân loại các thành phần HTML tương tự cách này hay cách khác.
Các lớp giả tương tự như chúng theo nghĩa là chúng cũng được sử dụng để thêm quy tắc kiểu cho các thành phần có chung đặc điểm.
Nhưng trong khi các lớp học chính hãng là đã xác định người dùng và có thể được phát hiện trong mã nguồn, ví dụ Các công việc của các lớp CSS thông thường là để phân loại hoặc nhóm yếu tố. Các nhà phát triển biết cách các yếu tố của họ được nhóm lại: họ có thể tạo các lớp như "mục menu", "nút", "hình thu nhỏ", v.v. để nhóm và sau đó tạo kiểu cho các phần tử tương tự. Các phân loại này dựa trên các đặc điểm của các yếu tố được đưa ra bởi chính các nhà phát triển. Chẳng hạn, nếu nhà phát triển quyết định sử dụng Tuy nhiên, các phần tử HTML có đặc điểm chung của họ dựa trên trạng thái, vị trí, tính chất và tương tác của họ với trang và người dùng. Đây là những đặc điểm không phải thường được đánh dấu trong mã HTML, nhưng chúng ta có thể nhắm mục tiêu chúng với các lớp giả trong CSS, ví dụ: Đây là các loại đặc điểm thường được nhắm mục tiêu bởi các lớp giả. Để hiểu rõ hơn về sự khác biệt giữa các lớp và các lớp giả tốt hơn, hãy giả sử chúng ta đang sử dụng lớp Chúng ta có thể định kiểu các phần tử con cuối cùng này bằng CSS sau: Nhưng điều gì xảy ra khi yếu tố cuối cùng thay đổi? Chà, chúng ta sẽ phải di chuyển Rắc rối này các lớp cập nhật có thể được để lại cho tác nhân người dùng, ít nhất là đối với những đặc điểm chung giữa các yếu tố (và là yếu tố cuối cùng là phổ biến nhất có thể). Đang có một định nghĩa trước Có nhiều loại giả lớp, tất cả chúng đều cung cấp cho chúng ta các cách để nhắm mục tiêu các yếu tố dựa trên các tính năng của chúng mà không thể truy cập hoặc khó truy cập hơn. Đây là danh sách các lớp giả tiêu chuẩn trong MDN. Các lớp giả động được thêm vào và xóa khỏi các phần tử HTML năng động, dựa trên trạng thái họ chuyển sang để đáp ứng với các tương tác của người dùng. Một số ví dụ về các lớp giả động là Các lớp giả dựa trên trạng thái được thêm vào các phần tử khi chúng trong một trạng thái tĩnh cụ thể. Một số ví dụ nổi tiếng nhất của nó là: Lớp giả dựa trên tiểu bang phổ biến nhất phải có Các lớp giả cấu trúc phân loại các yếu tố dựa trên về vị trí của họ trong cấu trúc tài liệu. Ví dụ phổ biến nhất của nó là Ngoài ra còn có các lớp giả khác rất khó phân loại, chẳng hạn như: Một trong những điều khó nhất về các lớp giả có lẽ là để hiểu sự khác biệt giữa Cả hai đều là lớp giả cấu trúc, và đánh dấu một yếu tố cụ thể bên trong một yếu tố cha (container), nhưng theo một cách khác. Giả định n là 2, sau đó Hãy xem một ví dụ. Chúng ta hãy xem cách CSS ngắn này tạo kiểu HTML trong hai trường hợp khác nhau. Trong trường hợp 1, phần tử thứ hai bên trong một Nhưng nếu phần tử cha làm có một đoạn thứ hai, Trong ví dụ của chúng tôi, Đoạn 1, con 1 Đoạn 2, con 3 Trong trường hợp thứ hai, chúng tôi di chuyển danh sách không có thứ tự đến vị trí thứ ba và đoạn thứ hai sẽ đến trước nó. Điều này có nghĩa là cả hai Đoạn 1, con 1 Đoạn 2, con 2 Nếu bạn muốn đọc thêm về sự khác biệt giữa Khi chúng ta nói về các lớp giả, điều quan trọng là phải hiểu chúng khác với các yếu tố giả như thế nào, để không trộn chúng lên. Nhưng trong khi chúng tôi sử dụng các lớp giả để chọn các phần tử HTML tồn tại trong cây tài liệu chỉ không được đánh dấu riêng, các phần tử giả cho phép chúng tôi nhắm mục tiêu các phần tử không thường tồn tại trong DOM, hoặc là tất cả (ví dụ Cũng có một sự khác biệt trong cú pháp. Các yếu tố giả thường được xác định bằng dấu hai chấm Điều này có thể dẫn đến một trường hợp nhầm lẫn như trong CSS2, các phần tử giả cũng được đánh dấu bằng một dấu hai chấm - các trình duyệt vẫn chấp nhận cú pháp dấu hai chấm đơn cho các phần tử giả. Cũng có sự khác biệt giữa các lớp giả và các phần tử giả trong cách chúng ta có thể nhắm mục tiêu chúng bằng CSS. Các phần tử giả chỉ có thể xuất hiện sau trình tự các bộ chọn, trong khi các lớp giả có thể được đặt ở bất cứ đâu trong trình tự chọn CSS. Ví dụ: bạn có thể nhắm mục tiêu mục danh sách cuối cùng của thành phần danh sách như HOẶC LÀ Trình tự đầu tiên của bộ chọn sẽ chọn con cuối cùng bên trong Hãy thử làm một cái gì đó tương tự với các yếu tố giả. Mã CSS ở trên là hợp lệ và văn bản "đỏ" sẽ xuất hiện sau các Mặt khác, mã này sẽ không hoạt động, như chúng ta không thể thay đổi vị trí của phần tử giả bên trong trình tự chọn. Ngoài ra, chỉ có một phần tử giả có thể xuất hiện bên cạnh bộ chọn, trong khi các lớp giả có thể kết hợp với nhau nếu sự kết hợp có ý nghĩa. Ví dụ, để nhắm mục tiêu các phần tử con đầu tiên cũng chỉ đọc, chúng ta có thể tạo kết hợp các lớp giả Mã chọn với một Điều quan trọng là phải biết rằng đó là không phải Các lớp giả CSS đang được jQuery nhắm đến. Chúng được gọi là phần mở rộng bộ chọn jQuery. Phần mở rộng bộ chọn jQuery cho phép bạn mục tiêu các yếu tố HTML với các từ khóa đơn giản hơn. Hầu hết trong số chúng là sự kết hợp của nhiều bộ chọn CSS bình thường, được biểu thị bằng một từ khóa duy nhất.Mục đích của các lớp giả
.Cuối cùng để xác định các yếu tố cuối cùng trong các thùng chứa cha mẹ khác nhau.
li.last text-Transform: chữ hoa; tùy chọn.last font-style: italic;
.Cuối cùng lớp từ yếu tố cuối cùng trước đây đến yếu tố hiện tại.:con cuối cùng lớp giả thực sự rất hữu ích Bằng cách này, chúng tôi không phải chỉ ra yếu tố cuối cùng trong mã HTML, nhưng chúng ta vẫn có thể tạo kiểu cho chúng bằng CSS sau: li: last-child text-Transform: chữ hoa; tùy chọn: last-child font-style: italic;
Các loại giả chính
1. Lớp học giả năng động
:bay lượn, :tiêu điểm, : liên kết, và : đã truy cập, tất cả trong số đó có thể được thêm vào thẻ neo. a: đã truy cập màu: # 8D20AE; .button: hover, .button: tập trung font-weight: bold;
2. Các lớp giả dựa trên nhà nước
:đã kiểm tra có thể được áp dụng cho các hộp kiểm ():toàn màn hình để nhắm mục tiêu bất kỳ yếu tố nào hiện đang được hiển thị ở chế độ toàn màn hình:tàn tật đối với các phần tử HTML có thể ở chế độ bị tắt, chẳng hạn như , , và . :đã kiểm tra, đánh dấu xem hộp kiểm có được kiểm tra hay không. .hộp kiểm: đã chọn + nhãn font-style: italic; đầu vào: bị vô hiệu hóa màu nền: #EEEEEE;
3. Lớp giả cấu trúc
: con đầu lòng, :con cuối cùng, và : con thứ n (n) - tất cả có thể được sử dụng để nhắm mục tiêu một phần tử con cụ thể bên trong một thùng chứa dựa trên vị trí của nó - và :nguồn gốc nhắm mục tiêu phần tử cha cấp cao nhất trong DOM. 4. Các lớp giả khác
: không (x) trong đó chọn các phần tử không khớp với bộ chọn x: lang (mã ngôn ngữ) chọn các yếu tố của nội dung trong một ngôn ngữ cụ thể: dir (tính định hướng) chọn các phần tử có nội dung theo hướng nhất định (từ trái sang phải hoặc phải sang trái). p: lang (ko) màu nền: # FFFF00; : root màu nền: # FAEBD7;
con thứ đấu với loại thứ n Các lớp giả
: con thứ và : loại thứ n lớp giả.: nth-of-child (n) nhắm mục tiêu một yếu tố đó là con thứ hai của phần tử cha của nó, và : loại thứ n (n) mục tiêu thứ hai trong số cùng loại của yếu tố (chẳng hạn như đoạn văn) bên trong một phần tử cha. / * một đoạn cũng là con thứ hai bên trong phần tử cha của nó * / p: nth-child (2) color: # 1E90FF; // lightblue / * đoạn thứ hai bên trong phần tử cha * / p: nth-of-type (2) font-weight: bold;
Trường hợp 1
con thứ n (2) quy tắc sẽ không áp dụng cho nó. Mặc dù nó là con thứ hai nhưng nó là không phải một đoạn văn. loại thứ n (2) quy tắc sẽ được áp dụng, vì quy tắc này chỉ tìm kiếm yếu tố, và không quan tâm đến khác các loại của các phần tử (như danh sách không có thứ tự) bên trong phần tử cha.loại thứ n (2) quy tắc sẽ định kiểu đoạn thứ hai là Con 3.
Danh sách không có thứ tự 1, Con 2
Trường hợp 2
: con thứ n (2) và : loại thứ n (2) quy tắc sẽ được áp dụng, vì đoạn thứ hai cũng là con thứ hai của cha mẹ của nó
Danh sách không theo thứ tự 1, con 3
: thứ n của trẻ em và : loại thứ n giả lớp, CSS Tricks có một bài viết tuyệt vời về nó. Nếu bạn sử dụng SASS, Family.scss có thể giúp bạn tạo phức tạp con thứ'yếu tố ified.Pseudo-Classes vs Pseudo-Elements
Yếu tố giả, nhu la ::trước và ::sau (xem hướng dẫn này về cách sử dụng chúng) cũng được thêm bởi các tác nhân người dùng, và chúng có thể được nhắm mục tiêu và tạo kiểu với CSS cũng giống như các lớp giả. ::trước và ::sau) hoặc chỉ là một số phần nhất định của các yếu tố hiện có (ví dụ: :: chữ cái đầu hoặc là :: giữ chỗ). ::, trong khi các lớp giả được xác định bằng một dấu hai chấm :.1. Vị trí của chúng trong Trình tự chọn CSS
ul>: last-child.red màu: # B0171F;
ul> .red: con cuối màu: # B0171F;
.màu đỏ) và người thứ hai chọn con cuối cùng trong số các yếu tố sở hữu .màu đỏ lớp học bên trong ul> .red :: sau display: block; nội dung: 'đỏ'; màu: # B0171F;
vật phẩm với lớp .màu đỏ. ul> :: after.red display: block; nội dung: 'đỏ'; màu: # B0171F;
2. Số lần xuất hiện trong Trình tự chọn
: con đầu lòng và :chỉ đọc theo cách sau: : con đầu lòng: chỉ đọc màu: #EEEEEE;
Phần mở rộng jQuery Selector
: cú pháp không phải lúc nào cũng tạo thành một lớp giả CSS thích hợp. Nếu bạn đã từng sử dụng jQuery, thì bạn có thể đã sử dụng nhiều bộ chọn của nó với : cú pháp, ví dụ $ (': hộp kiểm'), $ (': đầu vào') và $ (': được chọn'). .
