css - 第一个和最后一个子边界半径不起作用

Question

我的菜单上有以下选择器，可将边框半径应用于菜单的第一个和最后一个子项

.main-nav ul li a:first-child {border-radius: 6px 0 0 6px!important;}
.main-nav ul li a:last-child {border-radius:  0 6px 6px 0!important;}

我什!important至尝试添加以尝试强制执行此操作，但是它不起作用，而且我看不到它将被覆盖的位置，有人可以请教如何解决这个问题吗？

这个网站。

Answer 1

在您的样式表中，您有：

.main-nav ul li {
    float: left;
    background-color: #58585a; //remove this
    color: #ffffff;
}

从 .main-nav ul li 中删除背景颜色线。它显示在您的菜单项下，因此您看不到边框半径。

Answer 2

试试这个：

.main-nav ul li:first-child a {
    border-radius: 6px 0 0 6px!important;
}
.main-nav ul li:last-child a {
    border-radius:  0 6px 6px 0!important;
}

Answer 3

样式应用于li元素而不是a元素

尝试这个：

.main-nav ul li:first-child {border-radius: 6px 0 0 6px!important;}
.main-nav ul li:last-child {border-radius:  0 6px 6px 0!important;}