HTML+CSS杂记：[1]css无法控制标签元素
1、将下面的代码运行：
<html>
<head>
<style>
body {
font-size: 50
}
#all li {
color: #f00;
}
#down_menu {
color: #000;
}
</style>
</head>
<body>
<div id="all">
<ul>
<li>
<div>file</div>
<ul id="down_menu">
<li>a</li>
</ul>
</li>
<li>
<div>b</div>
</li>
<li>
<div>c</div>
</li>
</ul>
</div>
</body>
</html>
2、按道理id为"down_menu"的ul元素会被控制，"a"会变成黑色，其它的内容会变成红色，可结果却全是红的：
![HTML+CSS杂记：[1]css无法控制标签元素](https://exp-picture.cdn.bcebos.com/52fae62064fb960bd89bbad28fa355e982ae6c12.jpg)
3、为什么会这样？
因为html标签嵌套一般不能超过三层，否则会出现问题。比如第四层（下面的<ul id="down_menu">）的样式会被上面的ul样式给覆盖，即它的优先级不如嵌套它的同类标签。
![HTML+CSS杂记：[1]css无法控制标签元素](https://exp-picture.cdn.bcebos.com/974a2f21056104a3b9533c1d63d7592ae2ef6b12.jpg)
4、在css中的
#all li{color:#002233;}
样式会将所有#all下的li元素的文字变成“#002233”颜色，即使在下面加上这一个样式：
.down_menu li{color:#000000;}
它也仍然不是黑色。因为#down_menu li所控制的li已经被#all li控制了。
5、那么怎么解决呢？
如果一定要嵌套，那么就采用如下办法：
办法：
将
#all li{
color:#002233;
}
改成
#all {
color:#002233;
}
6、或者
将
.down_menu{
color:#000000;
}
改成
#down_menu li{
color:#000000;
}
7、改完后运行结果：
![HTML+CSS杂记：[1]css无法控制标签元素](https://exp-picture.cdn.bcebos.com/54a89daee8d7592a13555fcb9f31dfb6336c6712.jpg)