CSS Pseudo-elements ":birleştirerek" " sonra;:-çocuk geçen"

SORU

28 ŞUBAT 2010, Pazar

CSS Pseudo-elements ":birleştirerek" " sonra;:-çocuk geçen"

Yapmak istiyorum "dilbilgisi" listeleri kullanarak CSS. doğru Bu ben şimdiye kadar ne var:

<li> etiketleri yatay onlardan sonra virgül ile gösterilir.

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

Bu çalışır, ama ben istiyorum, "son çocuk" için virgül yerine nokta var. Ve mümkünse koymak istiyorum "ve" son çocuk". önce Sadece veremem yani dinamik olarak oluşturulur stil, ben listeleri "son çocuk" bir sınıf. Pseudo-elementleri birleştirmek olamaz, ama bu temelde ulaşmak istediğim etkiyi.

li:last-child li:before { content: "and "; }

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

Bu nasıl iş yapabilirim?

CEVAP

28 ŞUBAT 2010, Pazar

Bu çalışır :) (çoklu tarayıcı, Firefox sever umarım)

<html>
 <head>
  <style type="text/css">
   li { display: inline; list-style-type: none; }
   li:after { content: ", "; }
   li:last-child:before { content: "and "; }
   li:last-child:after { content: "."; }
  </style>
 </head>
 <body>
  <ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
  </ul>
 </body>
</html>

Bunu Paylaş: