CSS：在子菜单上应用的第一个菜单层的类

子菜单类（如果你悬停firstmenu，这是下拉菜单）。 'firstmenu'是该网站的主要区域，因此是名单的第一层。

问题：子菜单获得Firstmenus值。即使是小箭头background: url(images/nav-arrow.png) no-repeat center bottom;在 - 但为什么？！

我们已经调查了这一点，分裂代码，删除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>

来源

2013-04-21 Hannes Schneidermayer

它是继承吗？需要你的html，所以我们可以检查 – Mee 2013-04-21 22:43:20

如果它的定义像'#firstmenu .firstLevel .current a'，它能真的被继承吗？ – 2013-04-21 22:45:29

请张贴您的菜单的HTML。制作小提琴也会很有帮助。 HTML将有助于确定选择器如何应用。 – jmbertucci 2013-04-21 22:45:52

的直系后裔只锚标记，我认为这个问题是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”菜单有一个锚定标记（<a>），它是一个孩子（任何顺序，即孩子，孙子，伟大-grandchild等）.firstLevel这是一个孩子（的任何顺序）#firstmenu。

这正是CSS如何工作，但有办法阻止你看到的东西。

第一种选择是使用child selector（我有时称之为“直系后裔”选择）>

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

此选择明确规定：“那你悬停它是直接从的派生所有的锚标签.firstLevel，但没有更深。

这意味着，它匹配：

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

而不是链接下面

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

值 “B”，因为第二个<a>标签不直接后裔.firstLevel，有一个<ul>和<li>之间。

第二种选择是用另一个规则CSS specificity“覆盖”以前的样式。

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

有做其中的原因。

当样式对于该元素非常具体时，使用子选择器是很好的。您不希望任何样式继承到更多元素。

当您只想从另一个元素修改一个特定样式时，使用“替换”技术（因缺少更好的术语）。 IE浏览器。你想保留颜色，字体，字体重量，但只想删除背景图片。

我希望有帮助！

这里的一些（坏）拨弄出的基本情况：

http://jsfiddle.net/zTCbF/

与孩子选择

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

与替换技术

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

来源

2013-04-21 23:18:38 jmbertucci

这是一个非常宝贵的回复！非常感谢先生！ – 2013-04-22 00:41:31

很高兴帮助！ – jmbertucci 2013-04-22 00:42:18

#firstmenu .firstLevel a {

这将瞄准.firstLevel在任何锚标记包括那些.secondLevel下

因此，当你说...

#firstmenu .firstLevel a:hover,

您将悬停样式应用于.firstLevel

后代的所有锚定标记

你想说的...

#firstmenu .firstLevel > a {

这会指定.firstLevel

来源

2013-04-21 23:06:46 Turnip

直接点，完全正确！谢谢！ :-) – 2013-04-22 00:41:54

CSS：在子菜单上应用的第一个菜单层的类

回答

相关问题