1

我正在使用 WordPress

我在导航菜单中放了一个额外的容器。导航菜单的 ID 为 #access，额外的容器的 ID 为 #language-selection 。#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>

所以基本上我希望悬停和焦点在“Home”和“Contact”链接上保持不变，但要在#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 回答