html - 我需要使用 css 隐藏树中的最后一个节点

Question

我有使用 html、css 构建的树我需要隐藏树中的最后一个节点我的 css 代码是：

div ul li ul li ul li ul.treeview{ display: none; }

但没有工作，有什么问题？

标记：

<div id="field-term-parent-value-wrapper" class="form-item form-item-labeled">
    <div id="field-term-parent-value" class="tm-processed">
<ul class="treeview">
<li class="collapsable">
<ul class="treeview" style="display: block;">
<li class="collapsable">
<ul class="treeview" style="display: block;">
  data

Answer 1

尝试：

div ul li ul li ul li ul.treeview { display: none !important; }

因为您在元素中的内联样式会覆盖您为此元素定义的其他样式。

PS 我假设你知道你的标记并在 CSS 声明中输入正确的数字ul和。li您粘贴的内容表明那里只有三个ul和两个li，所以这会起作用：

div ul li ul li ul.treeview { display: none !important; }

Answer 2

我发现在这些情况下有效的是切换类名而不是直接设置“显示：块”。这可以防止需要疯狂的选择器或使用 !important。

/* the default is display:block, so all we need
   is this one class */

.closed {
    display: none;
}

---

<li class="collapsable">
<ul class="treeview">
<li class="collapsable">
<ul class="treeview" class="closed">