0

私はWebページのメニューに取り組んでおり、.current-menu-item-現在のアイテムの見た目を変えたいと思っています。ただし、このメニューの最初の項目は、角が丸くなっている必要があります（左上、左下）。：first-child要素を使用してそれを行うにはどうすればよいですか？ありがとう。

これはコードスニペット
HTMLです。 

<ul id="navHead">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>

CSS：

#navHead{
    border-radius: 5px;
    background: #454545 url('images/gradient.png') top left repeat-x;
}

#navHead li{
    float: left;
}

#navHead li a{
    display: block;
}

最後に、wordpressはアイテムをクリックした後に新しいクラスを作成します- current-menu-item。現在のリスト項目のクラス仕様に追加されます。また、navHeadは丸められているため、最初の項目をクリックすると、navHeadの左側が丸められなくなります。そのため、次のコードでこれを解決したいと思います。 

#navHead li:first-child .current-menu-item a{      
    border-top-left-radius: 5px;      
    border-bottom-left-radius: 5px;  
}

しかし、何も起こりません。私は1つのスタイルで使用する必要が.current-menu-itemあります。li:first-childHTMLコードはワードプレスによって調整されるので、CSSでのみこれを解決する必要があります。

4

1 に答える 1

0

編集された答え： 

#navHead li.current-menu-item:first-child{
    border-top-left-radius: 5px;      
    border-bottom-left-radius: 5px;
}

これにより、クラス'current-menu-item'がある場合、＃navHeadの最初のli要素の角が丸くなります。ただし、元の境界線の半径は、後続の要素ではなく「#navHead」に設定されていることに注意してください。

セレクターの構文と構造に関する参考資料：w3c仕様

于 2012-09-05T15:38:16.683 に答える