CSS: değil (: son çocuk): seçicinin

220

sonra böyle tarz öğelerin listesini vardır:CSS: değil (: son çocuk): seçicinin

ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li:not(:last-child):after { 
 
    content:' |'; 
 
}

<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
</ul>

arasında Kimse CSS'in son öğesini seçtiğini bilen var mı?

Benim için mükemmel Chrome 11 ile yazılmış eserler olarak :not() seçici here

kaynak

2011-03-27 Matt Clarkson

Bu davranış O Firefox 3.5 benim için çalışıyor Chrome 10. bir hata gibi görünüyor. – duri

309

, sen son çocuk için gerek hepsini ayarlamak ve sonuncusu

li:after 
{ 
    content: ' |'; 
} 
li:last-child:after 
{ 
    content: ''; 
}

geçersiz kılabilir veya edebilirsiniz

li+li:before 
{ 
    content: '| '; 
}

kaynak

2012-03-16 12:03:48 imma

sonra Bu gerçekten IE8 (üzgünüm, IE7 ve önceki için hiçbir cheetos) kadar geri çalışmak için almak için tek yoludur. li: not (: first-child): Internet Explorer'ın eski sürümleri için biraz fazla korkutucu. –

Sizin örnek tanımını görebilirsiniz. Belki de tarayıcınız :not() seçiciyi desteklemiyor mu?

Bu tarayıcıyı tamamlamak için JavaScript veya benzerlerini kullanmanız gerekebilir. jQuery, seçici API'sinde :not() uygular.

kaynak

2011-03-27 14:47:12

Bunu, li: not (: first-child): önce 'yaparak ve daha önce dikey çubuk ekleyerek çözdüm. Son çocuğu desteklemeyen Chrome'un kararlı sürümü ile çalışıyordum. Kanarya inşa ediyor. Cevap için teşekkürler. –

Chrome 2013'te bile desteklemiyor gibi görünüyor mu? – MikkoP

Sizin örnek benim için IE'de çalışmıyor

, içerik CSS özelliğini kullanmak IE standart şekilde sayfayı oluşturmak için Belgenizdeki Doctype başlığını belirtmek zorunda:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<head> 
<link href="style.css" rel="stylesheet" type="text/css"> 
</head> 
<html> 

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

</html>

İkinci yollu CSS 3 seçiciler

li:not(:last-of-type):after { content: " |"; }

kullanmaktır Ama hala

Doctype'ı belirtmek gerekir

Ve üçüncü yol aşağıdaki gibi bazı komut dosyası ile JQuery kullanmaktır: Üçüncü yol

<script type="text/javascript" src="jquery-1.4.1.js"></script> 
<link href="style2.css" rel="stylesheet" type="text/css"> 
</head> 
<html> 

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
</ul> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("li:not(:last)").append(" | "); 
    }); 
</script>

Avantajı Eğer Doctype'ı belirtmek zorunda ve jQuery uyumluluğu ilgilenir dont. bu bir sorun değil seçici ile buysa daha önce kullanıp kullanamayacağı

kaynak

2011-03-27 15:28:02

yeni HTML5 standardıdır. –

Bu, bununla başa çıkmak için harika ve modern bir yoldur. Sonunda çocuğuyla uğraşıyordum: cevabını buldum. Bu mükemmel!: (son-tipi): – Firze

130

Her şey doğru görünüyor. Kullandığınız yerine aşağıdaki css seçiciyi kullanmak isteyebilirsiniz.

ul > li:not(:last-child):after

kaynak

2013-06-17 10:06:39 Vivek

Teşekkürler, bu sonda kullandığım şeye benziyor: 'li: not (: first-child): before'. Cevaplanan yayındaki yorumu görün. –

Bu güzel. Kabul edilen cevap olmadığından emin değil misiniz? –

CSS

kullanıldığı bir örnek

ul li:not(:last-child){ 
     border-right: 1px solid rgba(153, 151, 151, 0.75); 
    }

kaynak

2017-07-26 20:57:11

CSS: değil (: son çocuk): seçicinin

cevap

İlgili konular