html - last-child 的 Bootstrap 导航边框

Question

我使用实际的 Bootstrap 。我用 li border-right 设置了 Bootstrap 导航的样式，但是当我使用

.wrapper .header .navbar.navbar-default .container .collapse.navbar-collapse.navbar-responsive-collapse .nav.navbar-nav li:last-child {
    border-right: 0px;

对于最后一个 child ，边框始终显示!

我该怎么做才能不显示最后一个 child 的 border-right？

Answer 1

使用 border-left 而不是 border-right 并将其设置为 0 for li:first-child

CSS 将如下所示:

.wrapper .header .navbar.navbar-default .container .collapse.navbar-collapse.navbar-responsive-collapse .nav.navbar-nav li { border-left:1px solid #CCCCCC; }

.wrapper .header .navbar.navbar-default .container .collapse.navbar-collapse.navbar-responsive-collapse .nav.navbar-nav li:first-child {
border-left:0px none;
}

请记住，last-child 选择器在 IE 低版本中永远不起作用。相反，第一个 child 在每个版本的 IE 和其他浏览器上都能正常工作。

此外，请记住将 border-left:0px none 设为 border-left:0px