1

角が丸いメニューを持つ Web ページに取り組んでいます。私はWordPressでテーマを使用してそれを変更しているので、他の誰かが作成したものから始めています. CSS と html に関して言えば、私は中途半端です。物事をまとめることはできますが、それはしばしばエレガントではなく、高度なことは私を超えています。

とにかく、私の問題はこれです-メニュー項目は、マウスがそれらの上に置かれると色が変わり、項目が現在のページを表すときはまだ別の色になります。通常のメニューとホバー アイテムは角が丸くなっていますが、現在のページ アイテムは丸くなっていません。これは、一番左にある項目の左側にのみ関係します。

次のように、機能するアイテムのホバー状態のCSSを少し見つけました。

.menu > li:first-child:hover, 
.menu > li:first-child:hover a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; }

しかし、これと同じ原則を現在のアイテム クラスに適用する方法がわかりません。これは私が試したものです：

.menu .current_page_item a > li:first-child:,
.menu  .current_menu_item a > li:first-child: {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

もちろん、うまくいきませんでした。私が言うように、それは本当に暗闇の中でのショットです.

4

1 に答える 1

0

次の方法で最初のメニュー項目アンカーを選択できます。

.menu > li:first-child > a {
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}

これは以下を対象としています。

the menu > the first list item inside that menu > the anchor immediately inside that list item

クラスはすべてのメニュー項目で使用できる.current-itemのに対し、最初のリスト項目を特に既存の要素とブレンドするためにターゲットにしようとしているため、これはクラスをターゲットにするよりも安全です。.current-item

元のセレクター構文の問題は、次のことでした。

.menu .current_page_item a > li:first-child:

選択しようとしています:

the menu > the current list item > the anchor inside that item >
the first list item immediately inside that item

そのほとんどは、ページの HTML にはありません。

于 2014-05-29T06:25:12.040 に答える