web-dev-qa-db-ja.com

現在のメニュー項目

テキストが本来のように白く表示されない理由を理解しようとしています。

bootstrap.min.cssのstyle.cssをWordpressのcurrent-menuクラスでオーバーライドしていますが、成功しません。右のタブが強調表示されますが、テキストの色は変わりません。

誰でも問題を見つけることができますか？

.current-menu-item > a{
background-color:#123456;
}
.menu-item:hover > a{
background-color:#123456;
color: white;
}

私もこれを試しました：

.current-menu-item > a{
background-color:#123456;
}

.current-menu-item:hover{
background-color:#123456;
color: white;
}

enter image description here

menuscustomization
1
Linards Berzins

あなただけのホバー時にテキストの色を変更しようとしていますか？

テキストの色を変更したいだけの場合（ホバーしたときだけでなく、ユーザーがそのページにアクセスしているときも同様）。

/* This targets the current page's menu item */
.current-menu-item > a{
background-color:#123456;
color: white;
}

/* This targets other menu items when you hover over them */
.menu-item:hover > a{
background-color:#123456;
color: white;
}

より具体的なものが必要な場合は、.menu-itemクラス、または適用されているブートストラップクラス（通常は.navまたは.nav-bar）を追加することができます。

だからあなたの最初のルールは

.menu-item.current-menu-item > a{
background-color:#123456;
color: white;
}

これは実際のマークアップを見ないで写真に基づいているだけなので、わかりにくいですが、ブラウザに組み込まれている開発ツールを使用して要素を調べれば、どのスタイルが適用されているのか簡単にわかります。あなたは単にあなたのルールがより高くなるように作り上げるのです。

2
aj-adl

ここでのあなたの問題があなたのコードではなく優先事項であると私は思う。ブートストラップスタイルシートに変更を加えたくないのではなく、この変更をメインのスタイルシートに追加したくないのです。

メインスタイルシートが最初にロードされるので、ブートストラップに加えた変更はメインスタイルシートを介して最初にロードされます。

ブートストラップスタイルシートはメインスタイルシートの後にロードされるので、これはすべての変更がブートストラップスタイルシートのデフォルトスタイルによって上書きされることを意味します。そのため、変更は表示されません。

2つの方法があります。1つは、すべてのカスタムスタイルにCSS優先順位!importantを追加すること（私は推奨しない方法ではありません）、カスタムスタイルシートを作成して優先順位を低くすること（999など）それをエンキューする場合は10より大きい数になるようにしてください（推奨方法）。たとえば、カスタムスタイルシートを作成し、それをcustom-style.cssという名前にします。

function enqueue_custom_style() {
    <--- enqueue custom stylesheet --->
 }

add_action( 'wp_enqueue_scripts', 'enqueue_custom_style', 999 );
2
Pieter Goosen