CSS：沒有（：最後一子）：選擇

220

後，我有元素的列表，這些風格像這樣的：One | Two | Three | Four | FiveCSS：沒有（：最後一子）：選擇

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>

你可以看到:not()選擇here

來源

2011-03-27 Matt Clarkson

這種行爲似乎是在Chrome 10中的錯誤它爲我在Firefox 3.5。 – duri 2011-03-27 14:56:23

309

如果這是一個問題與不選擇，你可以設置所有這些，覆蓋最後一個

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

，或者如果你之前可以使用，不需要最後孩子

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

來源

2012-03-16 12:03:48 imma

之後這實際上是讓它在IE8上工作的唯一方式（對不起，IE7和更早版本沒有cheetos）。 'li：不是（：第一個孩子）：之前的'對於老版本的Internet Explorer來說有點太可怕了。 – 2012-10-22 16:39:52

你的榜樣的定義文字作品完美地在Chrome 11我。也許你的瀏覽器不支持:not()選擇器？

您可能需要使用JavaScript或類似軟件來完成這個跨瀏覽器。 jQuery在其選擇器API中實現了:not()。

來源

2011-03-27 14:47:12

我通過做'li：not（：first-child）：before'來解決這個問題，並在之前添加了豎線。我正在使用穩定版本的Chrome，但似乎不支持最後一個孩子。金絲雀身材呢。謝謝你的回答。 – 2011-03-30 22:40:03

似乎即使在2013年，Chrome也不支持它？ – MikkoP 2013-03-24 12:53:19

您的樣品不能在IE工作對我來說，你有你的文檔中指定DOCTYPE頭呈現您的網頁在IE標準的方式來使用內容的CSS屬性：

<!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>

二方法是使用CSS 3個選擇

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

但你仍然需要指定文檔類型

而第三種方式是使用jQuery的一些腳本類似以下內容：

<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>

優勢的第三種方式是，你沒有指定文檔類型和jQuery將採取兼容性的照顧。

來源

2011-03-27 15:28:02

<！DOCTYPE html>是新的HTML5標準。 – 2011-03-30 22:37:57

這是處理這個問題的絕佳方式。我一直在努力：最後一個孩子，然後我找到了你的答案。這個是完美的！：not（：last-of-type）：在 – Firze 2016-10-20 10:44:58

130

每件事似乎都是正確的。你可能想要使用下面的CSS選擇器而不是你使用的。

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

來源

2013-06-17 10:06:39 Vivek

謝謝，這與我在最後使用的類似：'li：not（：first-child）：before'。請參閱回答帖子中的評論。 – 2013-06-17 10:08:36

這很美。不知道爲什麼它不是公認的答案！ – 2018-02-13 21:12:22

使用CSS

一個例子

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

來源

2017-07-26 20:57:11

CSS：沒有（：最後一子）：選擇

回答

相關問題