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

2025-07-21 07:30:15

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

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、改完后运行结果：

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。