первого и последний ребенок Border Radius не работает

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