2012-03-13 23 views
5

tôi có một danh sách các liên kết và tôi đang sử dụng đoạn mã sau để đặt một từ sau mỗi mục liên kết:Có thể kết hợp các lớp giả css3: sau và: lastchild?

a:after {content: "eg"} 

Tuy nhiên, tôi không muốn các nội dung để đến sau khi mục cuối cùng trong danh sách, lý tưởng là tôi muốn nói điều gì đó giống như

a:last-child:after {content: ""} 

nhưng điều này sẽ loại bỏ nội dung đi kèm sau tất cả các liên kết. Có cách nào kết hợp cả hai? Nếu có và bạn có thể giải thích những gì đang xảy ra chính xác tôi thực sự sẽ đánh giá cao nó :)

Cảm ơn

+1

': after' là một CSS2 giả phần tử, không phải là một lớp CSS3 giả.Chúng tôi sẽ cần phải xem HTML của bạn để tìm ra các bộ chọn quyền sử dụng – BoltClock

Trả lời

6

Hãy thử điều này:

HTML :

<ul> 
<li><a href="#">Check this out</a></li> 
<li><a href="#">Check this out</a></li> 
<li><a href="#">Check this out</a></li> 
</ul> 

CSS:

a:after {content: "what what"} 
li:last-child > a:after {content: ""}​ 

Đây là một Fiddle để chứng minh. Ngoài ra, xin lưu ý rằng nếu bạn có nhiều người dùng sử dụng IE7 và IE8, lớp giả :after không hoạt động trong IE7 trở xuống và lớp giả :last-child không hoạt động trong IE8 trở xuống. Xem ở đây: http://www.quirksmode.org/css/contents.html

+0

Cảm ơn, điều này đã làm việc hoàn hảo! – nick501414

1

tôi muốn làm điều đó với một sự kết hợp của :not, :last-child:after. Với :not(:last-child) bạn chọn tất cả các liên kết trừ mới nhất: http://jsfiddle.net/2CS9G/

a:not(:last-child):after{ 
    content: "--"; 
} 

Nếu a -tags của bạn đang ở trong một danh sách (ul): http://jsfiddle.net/2CS9G/2/

li:not(:last-child) a:after{ 
    content: "--"; 
} 
+0

Không hỗ trợ cho IE <9. Không cần phải làm điều này mặc dù nó là một lựa chọn tuyệt vời. – Maroshii

+1

@Maroshii: Điều này có liên quan gì đến việc hỗ trợ trình duyệt? (Lưu ý phụ, nếu OP đã sử dụng ': last-child', anh ấy có thể không quan tâm đến hỗ trợ của trình duyệt.) – BoltClock

+0

Tôi không biết về" không "! Cảm ơn, nên tạo mã ít hơn một chút trong tương lai. – nick501414

0

Nó làm việc cho tôi>link

Nó có thể là bạn quên để thêm display: block đến a.

+0

Các yếu tố nội tuyến có thể tạo nội dung. – BoltClock

+0

Tôi đang sử dụng khối hiển thị nhưng tôi phải ghi đè điều gì đó ở đâu đó. Cảm ơn cho những người đứng đầu lên! – nick501414

1

Sự kết hợp chọn sau đây làm việc cho tôi:

#myObj ul li:last-child::after { . . . } 
Các vấn đề liên quan