:-of cuối cùng loại không làm việc

Question

Tôi có một tài liệu HTML với nội dung HTML được viết tắt:

<div class="list"> 
    <form name="signupForm"> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-input"> 
     <input> 
     </label> 
     <label class="item item-button"> 
     <input class="button button-block button-positive"> 
     </label> 
     <label class="item item-button"> 
     <input class="button button-block button-signup"> 
     </label> 
    </form> 
</div> 

hành vi mong đợi của tôi là CSS selector .item.item-input:last-of-type sẽ lấy 4 label và phần tử .item.item-input cuối cùng của phụ huynh form.

Tôi đang làm gì sai?

Answer 1

:last-of-type khớp với phần tử là phần tử cuối cùng của loại (thẻ) trong thời gian cha mẹ (cấp một) của nó. Nó không biết hoặc quan tâm đến những bộ chọn khác mà bạn có thể đã kết hợp, bao gồm các bộ chọn lớp như .item-input hoặc bất kỳ thứ gì khác.

Không có cách nào đơn giản trong CSS để thực hiện những gì bạn muốn, có thể được biểu thị là :last-of-selector. Một số lựa chọn thay thế đã được đề xuất bao gồm

1. Bó bốn yếu tố đầu tiên trong một div riêng biệt, vì vậy bạn có thể làm :last-of-type bên trong nó.

2. Yêu cầu ai đó (máy chủ, JS địa phương) đánh dấu phần tử bạn muốn với một lớp cụ thể và tham chiếu đến nó.

3. Các lỗ hổng khác, chẳng hạn như cứng dây số lượng yếu tố bổ sung ở cuối mà bạn muốn bỏ qua và sử dụng :nth-last-of-type.

4. Cung cấp cho các phần tử được đề cập đến một thẻ khác, nếu bạn có thể quản lý và sau đó bạn có thể sử dụng last-of-type.

Answer 2

Dường như :last-of-type (từ Tài liệu MDN) chỉ có thể được sử dụng với không gian tên và type selectors (bộ chọn tên thẻ như input).

Tôi đề nghị thay đổi cấu trúc HTML của bạn để bao bọc các phần tử .item-input trong một <div>. Ngoài ra, tôi cũng đã thấy một lớp .last được thêm thủ công để thay thế bộ chọn giả.

Answer 3

Không thể tìm thấy .class:last-of-type. Lớp giả CSS :last-of-type đại diện cho anh chị em cuối cùng có tên phần tử cho trước trong danh sách con của phần tử gốc của nó. Cú pháp chính xác là element:last-of-type

Bạn có thể quan tâm đến :nth-last-of-type(n), sau đó bạn có thể sử dụng công cụ chọn sau để nhắm mục tiêu phần tử đó.

label:nth-last-of-type(3) { style properties } 

Các :nth-last-of-type(n) chọn phù hợp với tất cả các yếu tố đó là con thứ n, của một loại đặc biệt, công ty mẹ của nó, kể từ con cuối cùng.

Tuy nhiên, bạn sẽ cần phải sử dụng Javascript nếu bạn không thể chỉnh sửa đánh dấu và số lượng mục không cố định.