Lớp con trung cấp

Question

Có cách nào để sử dụng bộ chọn CSS để đưa con ở giữa vào danh sách các phần tử không?

Tôi biết rằng không có bộ chọn :middle-child theo nghĩa đen, nhưng có cách nào khác mà không cần sử dụng Javascript không?

Answer 1

Javascript là cách duy nhất để thực hiện phía ứng dụng khách này.

Answer 2

Bạn đã thử :nth-child(#) chưa?

Tùy thuộc vào trang bạn muốn chọn, bạn chỉ cần thay thế # bằng số.

Answer 3

Nếu bạn muốn áp dụng kiểu cho tất cả các yếu tố không phải là con đầu tiên cũng như con cuối cùng, bạn có thể sử dụng :not(:first-child), áp dụng kiểu và sau đó sử dụng :last-child để 'lấy phong cách' từ phần tử cuối cùng. Nhưng bạn phải suy nghĩ về những gì sẽ xảy ra khi có ít hơn 3 yếu tố.

Answer 4

này đã làm việc tốt cho tôi:

*:not(:first-child):not(:last-child) { 
    ... 
} 

Bạn có thể xem ví dụ về điều này ở đây: http://codepen.io/bentomas/pen/Gwqoe

Thông báo trước một điều này là nó chỉ hoạt động trong IE 9+: http://caniuse.com/#feat=css-sel3

Answer 5

Trong khi không thanh lịch, nếu bạn biết giới hạn trên và dưới của tổng số phần tử, bạn có thể sử dụng phương pháp tiếp cận vũ lực để chọn phần tử ở giữa.

Ví dụ: các quy tắc sau sẽ chọn phần tử ở giữa trong bộ 5, 7 hoặc 9 phần tử.

div:nth-child(3):nth-last-child(3) { 
    /* The middle element in a set of 5 is the 3rd element */ 
} 

div:nth-child(4):nth-last-child(4) { 
    /* The middle element in a set of 7 is the 4th element */ 
} 

div:nth-child(5):nth-last-child(5) { 
    /* The middle element in a set of 9 is the 5th element */ 
} 

Hoặc với Sass:

@for $i from 3 through 5 { 
    div:nth-child(#{$i}):nth-last-child(#{$i}) { 
     /* The middle element */ 
    } 
} 

Answer 6

Bạn có thể sử dụng "không đầu tiên và không kéo dài" cách tiếp cận, như vậy:

CSS

li:not(:first-child):not(:last-child) { 
    color:red; 
} 

HTML

<ul> 
    <li>First</li> 
    <li>Second</li> 
    <li>Third</li> 
</ul> 

Kiểm tra JsFiddle