1

私はWordPressを使用しています

ナビゲーション メニューに追加のコンテナを配置しました。ナビゲーション メニューには #access という ID があり、エクストラ コンテナーには #language-selection という ID があります。#language-selection コンテナーは<li>要素を使用しますが、ホバーとフォーカスは次の要素によってオーバーライドされます。

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
    background: #efefef;
}
#access li:hover > a,
#access a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}

#access コンテナー内にある場合、#language-selection コンテナーにホバーしたりフォーカスしたりしても何も起こらないように、これらのルールを上書きするにはどうすればよいですか?

以下は HTML です。

<nav id="access" role="navigation">
  <h3 class="assistive-text">Main menu</h3>
  <div class="skip-link">
    <a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a>
  </div>
  <div class="skip-link">
    <a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a>
  </div>
  <div class="menu">
    <ul>
      <li class="page_item page-item-24 current_page_item">
        <a href="http://localhost/katarina/?lang=en">Home</a>
      </li>
      <li class="page_item page-item-26">
        <a href="http://localhost/katarina/?page_id=26&amp;lang=en">Contact</a>
      </li>
    </ul>
  </div>
  <div id="language-selection">
    <ul class="qtrans_language_chooser" id="qtranslate-chooser">
      <li class="lang-en active">
        <a href="http://localhost/katarina/?lang=en" hreflang="en" title="English" class="qtrans_flag qtrans_flag_en">
          <span style="display:none">English</span>
        </a>
      </li>
      <li class="lang-DK">
        <a href="http://localhost/katarina/?lang=DK" hreflang="DK" title="Dansk" class="qtrans_flag qtrans_flag_DK">
          <span style="display:none">Dansk</span>
        </a>
      </li>
      <li class="lang-fa">
        <a href="http://localhost/katarina/?lang=fa" hreflang="fa" title="Farsi" class="qtrans_flag qtrans_flag_fa">
          <span style="display:none">Farsi</span>
        </a>
      </li>
      <li class="lang-ar">
        <a href="http://localhost/katarina/?lang=ar" hreflang="ar" title="???????" class="qtrans_flag qtrans_flag_ar">
          <span style="display:none">???????</span>
        </a>
      </li>
    </ul>
    <div class="qtrans_widget_end"></div>
  </div>
</nav>

したがって、基本的には、「ホーム」リンクと「連絡先」リンクでホバーとフォーカスを同じままにし、#language-selection 内のすべての li 要素で非アクティブ化する必要があります

4

1 に答える 1

1

HTML を提供したので、意味が少し理解しやすくなりました。私のアドバイスは.menu、スタイルに指定子として追加して、そのコンテナ内でのみ機能し、 を含まないようにすること#language-selectionです。そう：

#access a:focus { ... }

その後、

#access .menu a:focus { ... }

次に、そのスタイルを 内にあるアンカーにのみ適用しますdiv.menu。

重要なのは、自分のスタイルをできるだけ具体的にすることです。ただし、適用するほどスタイルの特異性が高くなるため、注意してください。意味：

<div id="foo">
  <div id="bar">
    <a class="baz">Hello, world!</a>
  </div>
</div>

次に適用します。

#foo #bar a { color: red; } /* higher specificity */
#bar a.baz { color: green; }

リンクは実際には緑ではなく赤になります。

于 2012-06-21T20:47:40.133 に答える