Question

我正在使用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>

所以基本上我希望悬停并专注于在“主页”和“联系人”链接上保持相同，但要在＃language-selection

内的每个li元素上停用

Answer 1

由于您提供了HTML，因此您可以更轻松地了解自己的意思。我的建议是在样式中添加.menu作为说明符，这样它才能在该容器中起作用，并且不包括#language-selection。所以：

#access a:focus { ... }

然后变成

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

然后它只会将该样式应用于div.menu中的锚点。

关键是要尽可能具体。但要小心，因为你应用的越多，样式specificity就越高。含义：

<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; }

链接实际上是红色而不是绿色。

如何在子li元素中覆盖悬停和焦点？

1 个答案: