Nhiều lớp học giả CSS

Question

Cú pháp CSS thích hợp để áp dụng nhiều lớp giả cho bộ chọn là gì. Tôi muốn chèn "," sau mỗi mục trong danh sách ngoại trừ mục cuối cùng. Tôi đang sử dụng css sau:

ul.phone_numbers li:after { 
    content: ","; 
} 

ul.phone_numbers li:last-child:after { 
    content: ""; 
} 

Điều này hoạt động tốt trên FF3, Chrome và Safari 3. IE7 không hoạt động vì nó không hỗ trợ: sau (như mong đợi). Trong IE 8, hàm này hiển thị bằng dấu phẩy sau mỗi li bao gồm dấu phẩy cuối cùng. Đây có phải là một vấn đề với IE8 hoặc cú pháp của tôi không chính xác? It's ok nếu nó không hoạt động trong IE8 nhưng tôi muốn biết cú pháp thích hợp là gì.

Answer 1

:last-child là một pseudo-class, trong khi :after (hoặc ::after trong CSS3) là một phần tử giả

Để báo the standard:

Giả lớp được phép bất cứ nơi nào trong selectors trong khi giả yếu tố chỉ có thể được nối sau khi chọn đơn giản cuối cùng của bộ chọn.

Điều này có nghĩa cú pháp của bạn là đúng theo CSS2.1 và CSS3 as well, tức là IE8 vẫn hút;)

Answer 2

IE8 không hỗ trợ cuối cùng con :(Họ đang tập trung vào việc phân loại ra CSS 2.1 hỗ trợ nó trông như thế nào. Tại sao microsoft đã không được thông qua Gecko hoặc Webkit nhưng tôi không biết.

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses

Answer 3

Bạn có thể sử dụng adjacent sibling selector:.

ul.phone_numbers li + li:before { 
    content: ","; 
} 

Answer 4

Bạn có thể khắc phục điều này bằng cách có một khác tag bên trong <li/> và áp dụng các :after để mà thay . Bằng cách đó bạn sẽ được áp dụng :last-child và :after đến các yếu tố khác nhau:

ul.phone_numbers li > span:after { 
    content: ","; 
} 

ul.phone_numbers li:last-child > span:after { 
    content: ""; 
} 

Answer 5

Không có vấn đề làm tổ selectors lớp giả chừng nào các quy tắc áp dụng phù hợp với các yếu tố đặc biệt trong DOM cây. Tôi muốn lặp lại khả năng tạo kiểu với bộ chọn lớp giả từ w3 website. Điều đó có nghĩa là bạn cũng có thể thực hiện các công cụ như:

.ElClass > div:nth-child(2):hover { 
    background-color: #fff; 
    /*your css styles here ... */ 
}