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 から background-color 行を削除します。メニュー項目の下に表示されているため、境界線の半径は見えません。

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