为什么 CSS 不允许我嵌套选择器块? [英] Why does CSS not allow me to nest selector blocks?
问题描述
我只是想在下拉菜单中创建另一个下拉菜单效果.
I'm just trying to create another dropdown menu effect within a dropdown menu.
观察:
<!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;
}
我这样做的唯一原因是看看这样的事情是否真的有效.它没有.我得说我真的不喜欢这种语言.虽然我确信不实施这种方法和设计/脚本模式是有原因的，但实施它似乎也有很多理由.
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.
为什么 CSS 不允许我嵌套选择器块?
Why does CSS not allow me to nest selector blocks?
推荐答案
不能嵌套语句.这不是 CSS 的正确用途.
You can't nest statements. It's just not the right use for CSS.
来自 维基百科:
层叠样式表 (CSS) 是用于描述的样式表语言表示语义(外观和格式)编写的文档在标记语言中.它最常见应用程序是为网页设置样式用 HTML 和 XHTML 编写，但语言也可以应用于任何一种 XML 文档，包括普通的XML、SVG 和 XUL.
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS 不像 JavaScript 那样是一种脚本语言，因此它的行为不像 JavaScript.它只是告诉浏览器要显示什么以及如何显示它.这只是它的主要目的.
CSS isn't a scripting language like JavaScript, so it doesn't behave like one. It just tells the browser what to display and how to display it. That's just the main purpose of it.
不过，有种方法可以在纯 CSS 中做你想做的事.虽然您不能嵌套规则声明，但您仍然可以通过多种方式应用它们:
There are ways, though, to do what you want in pure CSS. While you can't nest rule declarations, you can still apply them in nifty ways:
element subelement {
display: none;
}
element:hover subelement {
display: block;
}
这就是纯 CSS 中下拉菜单背后的基本逻辑.将 :hover 视为一种将类添加到被悬停的元素并从那里工作的东西.
That's the basic logic behind a dropdown menu in pure CSS. Think of :hover as a thing which adds a class to the element being hovered and work from there.
如果你想要一个完整的教程，这里有一个很有前途的:http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
If you want a full tutorial, here's a promising one: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
这篇关于为什么 CSS 不允许我嵌套选择器块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
