2011-06-01 42 views
-2

我只是想在下拉菜单中创建另一个下拉菜单效果。为什么CSS不允许我嵌套选择器块?

观察:

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="javascript/class-lib.js"></script> 
<script type="text/javascript" src="javascript/script.js"></script> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
</head> 
<body> 
<div id="wrapper"> 
    <ul id="nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#" class="selected">Parent 02</a> 
      <ul> 
       <li><a href="#">Item 01</a></li> 
       <li><a href="#" class="selected">Item 02</a></li> 
       <li><a href="#">Item 03</a></li> 
      </ul> 
      <div class="clear"></div> <!--".clear" div is nested within the .selected class, outside of the <ul>. Does this provide a buffer??? --> 
     </li> 
     <li><a href="#">Parent 03</a> 
     <ul> 
      <li><a name="child" href="#">Child 04</a> 
       <ul> 
        <li><a href="#">Item 01</a></li> 
        <li><a href="#">Item 02</a></li> 
        <li><a href="#">Item 03</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Item 05</a></li> 
      <li><a href="#">Item 06</a></li> 
      <li><a href="#">Item 07</a></li> 
     </ul>   
      <div class="clear"></div> 
     </li> 
     <li><a href="#">Parent 04</a></li> 
    </ul> 
    <div class="clear"></div> 
</div> 
</body> 
</html>> 

CSS:

#nav li ul li a:hover{ 

       #nav li ul li ul li a{ 
         visibility:visible; /*<-- the only reason why I did that was to see if something like this would actually work. It doesn't. I gotta say I'm really not a fan of this language. While I'm sure there were reasons for not implementing this kind of method and design/scripting pattern, it seems like there are just as well plenty reasons TO implement it. */ 
       } 
     } 

     #nav li ul li ul{ 
     display:block; 
     list-style:none; 
     } 

     #nav li ul li ul li{ 
     float:right; 
     clear:both; 
     width:50px; 
     height:100px; 
     background:#000; 
     } 

     #nav li ul li ul li a{ 
     visibility:hidden; 
     color:#fff; 
     } 

为什么我这样做是为了看看是否像这样的实际工作的唯一原因。它没有。我得说我真的不是这种语言的粉丝。虽然我确信没有实现这种方法和设计/脚本模式的理由,但似乎有足够的理由来实现它。

为什么CSS不允许我嵌套选择器块?

+2

你面临的问题是什么?我们不坐在这里观察你的墙代码。简要说明问题。 – 2011-06-01 03:17:25

+0

@minitech - 从我+1。 – 2011-06-01 03:19:22

+0

希望我的修改使问题成为一个问题。@荷兰,如果这不是你想问的问题,请纠正我,但我们不能真正阅读头脑...... – Blender 2011-06-01 03:22:39

回答

2

而不是做的:

#nav li ul li a:hover{ 

       #nav li ul li ul li a{ 
         visibility:visible; 
       } 
} 

它应该是:

#nav li ul li:hover ul li a 
{ 
    visibility:visible; 
} 
+0

+ 1有勇气和耐心地筛选,不需要太多线索就可以了解需要什么。 – stefgosselin 2011-06-01 03:21:45

+0

我认为我的观点比较清楚,但无论哪种方式,都不需要任何人对我问这个问题感到厌烦。一个简单的“你能更具体吗?”会是足够的。如果是因为我对CSS提出的评论,我仍坚定地站在那里:我认为它的设计很糟糕。 – zeboidlund 2011-06-01 03:26:33

+0

@Andre: 谢谢,我会把它用在我很确定的地方。 – zeboidlund 2011-06-01 03:27:11

2

不能嵌套语句。这只是不正确的使用CSS。

Wikipedia

层叠样式表(CSS)是一个用来描述 的标记语言编写 文档的表达语义(外观 和格式化) 样式表语言。其最常用的 应用程序是用HTML和XHTML编写网页 ,但 语言也可以应用于任何 类XML文档,包括纯XML,SVG和XUL。

CSS不是像JavaScript这样的脚本语言,所以它不像一个行为。它只是告诉浏览器要显示什么以及如何显示它。这只是它的主要目的。

还有的方法,但是,在纯CSS中做你想做的。虽然你不能嵌套规则的声明,你仍然可以申请他们俏皮的方式:

element subelement { 
    display: none; 
} 

element:hover subelement { 
    display: block; 
} 

这背后纯CSS下拉菜单的基本逻辑。把:hover想象成一个东西,它将一个类添加到要被徘徊的元素并在那里工作。

如果你想有一个完整的教程,这里是一个有前途的一个:http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

+0

谢谢,我会检查一个。 – zeboidlund 2011-06-01 03:34:40

0

其他人已经展示了如何解决这个问题,但是你真不该这样做反正这种方式;尽管它是创建菜单的一种很好且干净的方法,但它跨越了内容呈现行为规则的边界。虽然它可能并不重要,但下拉菜单的代码属于JavaScript。