但灵活应用CSS会有给人眼前一亮的感觉！
以下用一个简单的例子来阐述我想说的。
CSS代码：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载复制代码代码如下:#nav li ul {display:none;}
HTML代码：
复制代码代码如下:菜单1子菜单1子菜单2子菜单3子菜单4菜单2子菜单1子菜单2子菜单3子菜单4子菜单4
效果如下：
需要的效果是：
1、初始时，所有的子菜单都是隐藏的。
2、点击菜单项，相应的子菜单列表显示。
3、再点击， 子菜单隐藏。
半年前的我的做法会是这样：取得#nav中的h3元素，循环在其上添加事件。事件判断其下一个兄弟节点是否隐藏，根据状态修改子菜单ul元素的display属性。
代码大致如下：（以下所有代码仅用于表达逻辑，请不要纠结于是否可执行。）
复制代码代码如下:var els = [...]; //代码取得h3元素数组。
for(var i=0; i els[i].addEventListener("click",function() {var target = this.nextSibling;if(target.style.display == "none") target.style.display = "block";else target.style.display = "none"}, false);}一个月前的话，做法大概是这样：在#nav > ul上直接添加事件，在事件中判断目标对象是否h3对象。如果是则取得下一个兄弟节点，并根据其显示状态来修改display属性。
代码大致如下：
复制代码代码如下:var container = document.getElementById("nav");container.addEventListener("click", function(e) {var target = e.target, list;if(target.tagName == "H3") {list = target.nextSibling;if(list.style.display === "none") list.style.display = "block";else list.style.display = "none";}}, false);两种做法，孰优孰劣请自行判断。
前段时间做了一个需求，在代码中看到另外的一种思路——这才是我在这里要说的——利用CSS来完成交互。
依然是代码：
CSS代码：
复制代码代码如下:#nav li.menu ul {display:block;}
JS代码大致如下：
复制代码代码如下:var el = document.getElementById("nav");el.addEventListener("click", function(e) {var target = e.target.parentNode;if(target.tagName == "LI") {if(target.className == "") target.className = "menu";}else {target.className = "";}}}, false);看看代码，貌似第三种方法跟第二种差不多嘛。
恩~~，如果点击h3元素不止是修改下一个ul元素的显示状态，比如还要修改h3的背景图案呢？
这时候第二个方法需要在根据h3的background属性来修改值，而第三种只需要添加一条样式：#nav li.menu h3{background:url(...)}即可了。
其他的就没什么好说了。大家都有自己的判断，孰优孰劣心里自有评断。
PS：
如果一个页面存在别的样式表影响了你的样式，就会有个优先权的问题。我们都知道id，class和tag的优先级别，但是对一个表达式，它的优先权是怎么计算的呢？
请google一下，或者先看看《老调重弹的CSS优先级》。