css实现树非全选效果

在前端开发中，经常会遇到需要实现树形结构的选择功能。通常情况下，我们可以使用复选框加上递归遍历的方式实现全选和取消全选的功能。但是，有时候我们需要实现一些非全选的效果，如只能选择父级节点、只能选择叶子节点等等，这时候就需要借助CSS来实现。

.tree input[type="checkBox"] {
    display:none;
}
.tree input[type="checkBox"] + label:before {
    content: "▹";
}
.tree input[type="checkBox"]:checked + label:before {
    content: "▿";
}
.tree input[type="checkBox"]:checked + label + ul {
    display:block;
}
.tree input[type="checkBox"]:checked:not(:checked ~ input[type="checkBox"]) + label:before {
    content: "▹";
}

上面的代码是一个简单的树形结构展示，其中的CSS代码可以实现以下几个非全选效果：

• 只能选择父级节点：当我们勾选一个父级节点时，它的所有子节点都会被勾选。但是，当我们勾选一个子节点时，对应的父级节点并不会被勾选。
• 只能选择叶子节点：当我们只勾选树形结构的最后一层叶子节点时，它们的父级节点并不会被自动勾选。

使用CSS来实现树形结构的选择功能，可以避免一些繁琐的递归操作和后端计算，在一定程度上提高前端的运行效率和用户的体验。但是，这种实现方式仍然需要慎重选择，因为某些情况下可能会影响代码的可读性和维护性。