HTML+CSS杂记：[1]css无法控制标签元素

时间：2024-11-04 21:05:53

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"会变成黑色，其它的内容会变成红色，可结果却全是红的：

3、为什么会这样？因为html标签嵌套一般不能超过三层，否则会出现问题。比如第四层（下面的<ul id="down_menu">）的样式会被上面的ul样式给覆盖，即它的优先级不如嵌套它的同类标签。

4、在css中的#allli{color:#002233;}样式会将所有#all下的li元素的文字变成“#002233”颜色，即使在下面加上这一个样式：.down_menu li{color:#000000;}它也仍然不是黑色。因为#down_menuli所控制的li已经被#allli控制了。

5、那么怎么解决呢？如果一定要嵌套，那么就采用如下办法：办法：将#all li{ color:#002233;}改成#all { color:#002233;}

6、或者将.down_menu{color:#000000;}改成#down_menu li{color:#000000;}

7、改完后运行结果：

html+css做小箭头技巧

html+css图片换肤插件

纯html+css分页放大效果

html css 如何让未知大小的div居中

html+css选择卡好看的样式