树使用css选择器优化代码（IE7+，firefox3，opera9，chrom下可用）

最新推荐文章于 2023-03-25 20:11:22 发布

最新推荐文章于 2023-03-25 20:11:22 发布 · 142 阅读

文章标签：

#CSS #浏览器 #Opera #HTML

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种在IE6至IE9浏览器中实现树形组件图标的方法。通过使用不同的CSS技巧，在IE7及以上版本中利用CSS选择器及背景图片实现树节点的展开、关闭、叶子状态等图标展示，而在IE6中则采用img元素或背景图方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在IE6 下，不支持 .parent > .children 的css选择器语法，所以基于IE6的树组件中一般都是单独使用img元素或者背景来显示树的图标。

在IE7 和其他的主流浏览器中，已经支持了以上的css选择器语法，这样我们就可以采用在span中用padding-left和span的背景图片的方案来解决树图标（展开、关闭、叶子、复选框等）的显示。

css 示例样式

.youi-tree li.treeNode >span{cursor: pointer;padding:1px 0px 0px 18px;-padding-top:2px;background: url(images/tree/leaf.gif) 0 0px no-repeat;line-height:16px;vertical-align:bottom;}
.youi-tree li.treeNode.root >span{background-image:url(images/tree/root.gif);}
.youi-tree li.treeNode.collapsable >span{background-image: url(images/tree/folder-open.gif);}
.youi-tree li.treeNode.expandable >span{background-image: url(images/tree/folder.gif);}
.youi-tree li.treeNode.selected >span a{color:red;}
.youi-tree li.treeNode.checked >span{background-image: url(images/tree/btn_check_checked.png);}
.youi-tree li.treeNode.partchecked >span{background-image: url(images/tree/btn_check_checked_part.png);}
.youi-tree li.treeNode.unchecked >span{background-image: url(images/tree/btn_check.png);}
.youi-tree li.treeNode.loading >span{background-image: url(images/tree/loading.gif);}

树最终有效的html

<li class="treeNode unchecked" title="查找0">
    <div class="triggerHandle"/>
    <span><a href="#">查找0</a></span>
</li>

div.trigerHandle ：用于expand和close
span ：存放文字，树节点图标样式
a ：提供上下左右箭头控制的焦点

效果图

代码未完成，风格也不太好，就不拿出来误导人了。

192个节点动态展开的本机测试耗时，比自己以前写的树快了不少。

IE6 :样式不支持

IE7 : 850ms

Opera 9: 240ms

firefox3:500ms

chrom:240ms