如何在 CSS 中禁用 div 的倒数第二个孩子的边框？答案

【问题标题】：How to disable border on the second last child of div in CSS?如何在 CSS 中禁用 div 的倒数第二个孩子的边框？
【发布时间】：2015-11-21 10:18:12
【问题描述】：

我正在创建一个导航菜单，我将禁用菜单项的最后一个子项的边框，如下 CSS。

这里是 HTML，它可能有相同的选择器。

<div class="row">
    <div class="col-md-1 portfolio-item">
        <a href="<?PHP echo base_url('network-coverages'); ?>">
            <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
            <span class="is-mob">
                <?php echo $this->lang->line('network'); ?>
            </span> 
        </a>
    </div>
    <div class="col-md-1 portfolio-item">
        <a href="<?PHP echo base_url('network-coverages'); ?>">
            <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
            <span class="is-mob">
                <?php echo $this->lang->line('network'); ?>
            </span> 
        </a>
    </div>
    <div class="col-md-1 portfolio-item">
        <a href="<?PHP echo base_url('network-coverages'); ?>">
            <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
            <span class="is-mob">
                <?php echo $this->lang->line('network'); ?>
            </span> 
        </a>
    </div>

这是 CSS

.portfolio-item{
    border-right: 1px solid white;
}
.portfolio-item:last-child{
    border-right:none
}

这里是图片

你可以在这里看到demo website

【问题讨论】：

.portfolio-item:last-child{ border-right:none; } ?还是有什么问题？
@Cambodiachannel 我找不到边界老兄你应该更新代码
如果你转那个:last-child - border:0，那个div的最后一个孩子就不会有任何边框了！最好你创建一个小提琴
last-child 是 not 最后一个孩子。
现在已经完成了，因为在那之后我还有另一个 div，所以我必须将该内容包装到仅 div。

标签： html twitter-bootstrap css css-selectors

【解决方案1】：

职业链接是倒数第二个子项，因此您不能为此使用:last-child。

使用:nth-last-child伪类反向选择元素：

.portfolio-item:nth-last-child(n + 2) {
    border-right: 1px solid white;
}

上述选择器将匹配除最后一个之外的所有子代。需要:nth-last-child 支持。

【讨论】：

【解决方案2】：

试试这个

.portfolio-item{
    border-right: 1px solid white;
}
.portfolio-item:last-child{
    border-right: none;
}

【讨论】：

您的回答已更正，但我的上述网站无法正常工作如果您请在我的网站上查看cootel.com.kh/demo
你添加了 .portfolio-item:last-child{ border-right: none; } 我没有在你的风格中看到它。
或在最后一个 div 中使用这种内联样式
cootel.com.kh/demo/careers"><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"> 职业

【解决方案3】：

你可以试试:not选择器和:last-child：

.portfolio-item:not(:last-child){
    border-right: 1px solid white;/*color and border size you can change*/
}

类似DEMO

【讨论】：

【解决方案4】：

.portfolio-item:last-child { border-right: none; }

【讨论】：

是的，当 OP 改变他的问题时，我正在回答这个问题.. 很抱歉试图帮忙：S
我没有给你投反对票..但是在给出答案时要小心..并且也要检查编辑..

【解决方案5】：

如果样式在其他地方定义，请尝试添加!important。

.portfolio-item{
    border-right: 1px solid white;
}
.portfolio-item:last-child{
    border-right: none !important;
}

如果这不起作用，您将不得不向我们展示更多代码。

由于我们还没有看到您的所有代码，我无法确定这是否符合您的需求，但无论如何。试试这个：

.portfolio-item{
    border-right: 1px solid white;
}
.portfolio-item:last-of-type{
    border-right: none !important;
}

【讨论】：

是的，但我仍然不工作，您可以在菜单顶部的这个网站上查看，如上图cootel.com.kh/demo