html - CSS:应用于子菜单的第一个菜单层的类

Question

我有一个导航菜单。但是菜单变得很疯狂。

子菜单类(如果您将鼠标悬停在第一个菜单上，则为下拉菜单)。 'firstmenu' 是网站的主要区域，因此位于列表的第一层。

问题:子菜单获取 Firstmenus 值。即使是小箭头 background: url(images/nav-arrow.png) no-repeat center bottom; in - BUT WHY?!

我们已经对此进行了研究，拆分了代码，删除了 typo3，所有 JavaScript，并最终得到了这个 css 代码:

#firstmenu {
 list-style: none; 
 margin: 0;
 padding: 0;
}

#firstmenu .firstLevel {
 float: left;
}

#firstmenu .firstLevel a { 
 display: block;
 font-size: 1.166em;
 font-weight: 600;
 line-height: normal;
 color: #333;
 padding: 41px 20px 26px;
 margin-bottom: 4px;
}

#firstmenu .firstLevel .current a,
#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
 color: #fff;
 background: url(images/nav-arrow.png) no-repeat center bottom;
}

#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
 background-color: #333;
}

/* Drop-Down Menus */

.submenu {
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
}

.submenu > ul {
 top: 4px !important;
}

.submenu .secoundLevel {
 width: 200px;
 background: #fca500;
}

.submenu .secoundLevel a {
 display: block;
 color: #fff;
 padding: 8px 15px;
 border-top: 1px solid rgba(255,255,255,0.2);
}

.submenu .secoundLevel a:hover {
 background-color: #333;
 border-color: #1a1a1a;
}

.submenu .secoundLevel:first-child a {
 border-top: none;
}

有人知道解决方法吗？

编辑，html:

<nav id="nav">
 <ul id="firstmenu" class="clearfix">
  <li class="firstLevel"><a href="index.php?id=99"  >Startseite</a></li>
  <li class="firstLevel current"><a href="index.php?id=91">Rootserver</a>
   <ul class="submenu">
    <li class="secoundLevel"><a href="index.php?id=96"  >Vergleich</a></li>
   </ul>
  </li>
  <li class="firstLevel"><a href="index.php?id=92">Voiceserver</a>
   <ul class="submenu">
    <li class="secoundLevel"><a href="index.php?id=97">Preisvergleich</a></li>
   </ul>
  </li>
 </ul>
</nav>

Answer 1

我认为问题出在对 CSS 选择器的理解上。这个选择器:

#firstmenu .firstLevel a.selected {
  color: #fff;
  background: url(images/nav-arrow.png) no-repeat center bottom;
}

声明如下:匹配ALL <a>父类名称为 firstLevel 的链接它有一个 ID 为 firstmenu 的父级

这意味着这个 HTML 位匹配:

<ul id="firstmenu" class="clearfix">
    // snip
    <li class="firstLevel current"><a href="index.php?id=91">Rootserver</a>
        <ul class="submenu">
            <li class="secoundLevel"><a href="#">Vergleich</a></li>
        </ul>
    </li>
    // snip

因为“secondLevel”菜单有一个 anchor 标记 (<a>)，它是 .firstLevel 的子项(任何顺序，即子项、孙项、曾孙等)这是 #firstmenu 的 child (任何顺序) .

这正是 CSS 的预期工作方式，但有一些方法可以防止您看到这种情况。

第一个选项是使用 child selector (我有时将其称为“直系后代”选择器)>

.firstLevel > a:hover{ /* code */ }

此选择器明确指出:“您悬停的所有 anchor 标记都是 .firstLevel 的直接后代，但没有更深的。

也就是说，它匹配:

<li class="firstLevel"><a href="#">A</a></li>

但不是下面带有值“B”的链接

<li class="firstLevel"><a href="#">A</a>
    <ul>
        <li><a href="#">B</b></li>
    </ul>
</li>

因为第二个<a>标签不是 .firstLevel 的直接后代, 有一个 <ul>和 <li>他们之间。

第二个选项是通过使用另一个具有更高 CSS specificity 的规则来“覆盖”以前的样式.

#firstmenu .firstLevel .submenu a.selected {
  background-image: none; /* remove the arrow from drop-down menus*/
}

做其中之一是有原因的。

当样式非常特定于该元素时，使用子选择器很好。您不希望任何样式延续到其他元素。

当您只想修改另一个元素的一种特定样式时，请使用“替换”技术(因为缺少更好的术语)。 IE。您想保留颜色、字体、字体粗细，但只想删除背景图像。

希望对您有所帮助!

这里有一些(坏的) fiddle 展示了基本情况:

http://jsfiddle.net/zTCbF/

带有子选择器

http://jsfiddle.net/zTCbF/1/

用替换技术

http://jsfiddle.net/zTCbF/2/