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的第二个元素

回答

相关问题