时间戳

首页 > 解决方案 > 最后一个孩子选择CSS中的所有孩子？

html - 最后一个孩子选择CSS中的所有孩子？

问题描述

我一直在尝试删除最后一个选项卡的 border-right 属性...但是 nth-child 属性或 last-child 属性都不起作用...另外，当我使用 nth-child(1) 时，它会选择所有孩子们，不适用于其他价值观

<!-- HTML Markup -->

<ul>
    <a href="#">
        <li>Solutions</li>
    </a>
    <a href="#">
        <li>Industries</li>
    </a>
    <a href="#">
        <li>Resources</li>
    </a>
    <a href="#">
        <li>Partners</li>
    </a>
    <a href="#">
        <li>About</li>
    </a>
    <a href="#" class="button">
        <li>Enterprise</li>
    </a>
</ul>

/* CSS Code */


 ul:after{
    content: "";
    display: block;
    clear: both;
}

li {
    float: left;
    padding: 10px 15px;
/*    border-right: 1px solid #a5a5a5;  */
    color: #1F222B;
}
li {
    border-right: 1px solid #ff0000;
}

li:nth-of-type(1) {
    border-right: 1px solid #00b2ff;
}


li:hover {
    border-right: 1px solid #F3EFF2;
    background: #1F222B;
    color: #F3EFF2;
}

请帮助解决方案和原因？是否有可能在“a”标签内使用“li”标签但使用浮动“li”标签来实现解决方案？

标签： htmlcss

解决方案

您可以添加此 CSS 以从最后一个选项卡中删除边框

a:last-child li {
border-right: none;
}

推荐阅读