为什么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编写的web页面
，但是
语言也可以应用于任何
类型的XML文档，包括plain
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一样的脚本语言，所以它的行为不像一个。它只是告诉浏览器要显示什么以及如何显示它。这只是它的主要目的。
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屋！
