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

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添加尝试强制启用此功能，但它无法正常工作，我无法看到它会被覆盖的地方，有人可以建议如何绕过这个吗？

This the site.

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;}