如何用CSS删除特定的边框

Question

我正在尝试删除右边的最后一个边框，如下图所示。我该怎么处理这个？

我的代码：

null

#headerlinks li, a {
    display: inline-flex;
    text-decoration: none;
    color: black;
    border-right: solid 1px black;
}

  <div id="headerlinks">
        <nav>
            <ul>
                <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html -->
                <li><a href="#">Accessibility</a></li>
                <li></li><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>

null

Answer 1

如果您想从所有标记中删除边框，那么只需从css中删除边框-右：固体1px黑色

null

#headerlinks li, a {
    display: inline-flex;
    text-decoration: none;
    color: black;
    border-right: solid 1px black;//remove this if border not req.
}

<div id="headerlinks">
        <nav>
            <ul>
                <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html -->
                <li><a href="#">Accessibility</a></li>
                <li></li><a href="#" style="border:none;">Login</a></li>
            </ul>
        </nav>
    </div>

Answer 2

您应该为li的最后一个添加样式，即#headerlinksli:last-child,a

null

#headerlinks li, a {
    display: inline-flex;
    text-decoration: none;
    color: black;
    border-right: solid 1px black;
}
#headerlinks li:last-child, a {
    border-right: none;
}

 <div id="headerlinks">
        <nav>
            <ul>
                <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html -->
                <li><a href="#">Accessibility</a></li>
                <li></li><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>