CSS目標OL的第二個元素

我有以下ol：CSS目標OL的第二個元素

<ol class="breadcrumb"> 
<li><a href="/home">home</li> 
<li><a href></a></li> 
<li><a href="/registration">registration</li> 
</ol>

我需要爲目標的ol的第二個孩子，並隱藏它，但無論我嘗試 - 它是不成功的。

我有特里結構如下：

ol.breadcrumb:second-child{ 
    display: none; 
} 

ol.breadcrumb.float-right:nth-child(2){ 
    display: none; 
} 

ol.breadcrumb.float-right:nth-of-type(2){ 
    display: none; 
}

來源

2016-04-22 WpDoe

使用瀏覽器的開發人員工具（'ctrl' +'shift' +'j'將其打開），在顯示當前頁面的DOM版本的標籤上Chrome）做一個'ctrl' +'f'，然後輸入你的選擇tor'ol.breadcrumb：nth-child（2）'查詢是否會引發預期的元素。如果沒有，那麼去另一個。 – revo

要定位的ol老二，試試這個：

ol.breadcrumb li:nth-child(2){ 
    display: none; 
}

您還需要關閉a元素在你的代碼。

Fiddle

來源

2016-04-22 08:40:21

擊敗我，我已經刪除了我的答案與你的一樣！ –

哈哈，這是SO的遊戲;） –

非常感謝，按預期工作。 – WpDoe

ol.breadcrumb li:nth-child(2) { ... }將工作 - 你有.float-right，你不會在HTML有。 nth-child(2)對於li，不ol

您還需要正確地關閉您的<a>線路1和3

演示：https://jsfiddle.net/mwmhd6cc/

我使用的背景顏色，而不是顯示無人顯示效果，但您可以將其更改爲display: none

來源

2016-04-22 08:41:03

CSS目標OL的第二個元素

回答

相關問題