1

WordPress テーマの設定でデフォルトの CSS をオーバーライドしようとしていますが、そうするのに大変な時間を費やしています。

トップメニューはこんな感じ。

メニュー

トップリンクにカーソルを合わせると、サブメニューリンクにも同じことが言えます。

サブメニュー

リンクを白にしたいのですが...明らかに青はまったくうまく表示されません。

「About」リンクを Firebug すると、次のようになります。

火の虫

Firebug を右クリックして HTML をコピーすると、次のようになります。

<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155"><a href="http://www.occupyhln.org/about-us/">Our Mission</a></li>

#MashMenu、.menu-mega-menu、.mashmenu を使用してみましたが、常に color:#FFFFFF!important; を実行します。しかし、その青を取り除くものは何もありません。ここで十分な情報を提供したかどうかはわかりませんが、正しい方向に導くための助けをいただければ幸いです。

私のブログはhttp://www.occupyhln.orgにあります。

4

4 に答える 4

1

影響を与えようとしているタグに色のオーバーライドを直接適用する必要があると思います。<a>おそらく、色を決定するより高レベルなものがあるでしょう。

次の簡単な例を考えてみましょう。

HTML

<ul>
  <li>
    <a href='http://google.com'>Here is a link</a>
  </li>
</ul>

CSS

li {
  color: red;
}

li a {
  color: green;
}
于 2013-09-04T17:23:08.560 に答える
1

色がワードプレスのテーマから来ているのか、ユーザー エージェントのスタイルシートから来ているのかはわかりませんが、後者は特定性の高いセレクターを持っている傾向がありa、単純なaセレクターが思い通りに動作しません。

継承された値はセレクターとは関係ありません。aプロパティの他のセレクターをオーバーライドするには、実際に を選択する必要があります。例えば：

.wordpress-theme a {
    /* Selects <a> and sets the color
    color: blue;
}
#MashMenu {
    /* Selector has higher specificity but does not select <a> */
    color: red;
}
#MashMenu a {
    /* Selects `<a>` with higher specificity */
    color: red;
}
于 2013-09-04T17:22:32.863 に答える
0

誰かが同様の問題に遭遇した場合に備えてこの問題を解決するために、次を使用しました。

.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}

しかし、カスタム CSS の一番下に配置すると、機能しませんでした。カスタム CSS の先頭に配置すると、何らかの理由で機能しました。なぜそうなのかはわかりませんが、これが最終的に私にとってのトリックでした。意見を述べ、これを理解するのを手伝ってくれたすべての人に感謝します.

于 2013-09-06T03:46:59.977 に答える