css - メニュー 'border-right: none' が機能しない

Question

このページにメニュー区切りを追加しましたhttp://79.170.40.241/refthecoffeefactory.co.uk/home

また、メニューの右端にあるボーダーを削除するために次を追加しましたが、機能していないようです.....

#navigation ul.nav > li.menu-item-56 {
    border-right: none !important;

}

理由についてのアイデアはありますか？

Answer 1

境界線のスタイルは、aタグではなくliタグにあります。

これはあなたのために仕事をするはずです:

#menu-item-56 a {
    border-right: none !important;
}

Answer 2

注：さらに調べてみました。境界線は、テーブルではなく「a」タグにあります。それでも、私の以前の答えは次のとおりです。

他のスタイルによってオーバーライドされているようです。スタイル チェーンを見ると、多くの重複するスタイルがあり、!important を頻繁に使用しています。その特定の要素を分離する方法はありますが、特異性と継承を考慮して、すべてのスタイルを再検討することをお勧めします。簡単かつ効果的に説明しているサイトは次のとおりです 。 http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

また、Firefox または Chrome でどのスタイルが具体的に壊れているかを調べるには、要素を右クリックして調べます。境界線を指定していないものが上書きされていることがわかります (取り消し線が引かれています)。

Answer 3

#main-nav li a:last-child
{
border-right: none !important;
}