Question

我有一个这样的嵌套列表：

   <ul class="tree">
     <li><div>Animals</div>
       <ul>
         <li><div>Birds</div>
           <ul>
             <li class="last"><div>Eagle</div></li>
           </ul>
         </li>
         <li><div>Mammals</div>
           <ul>
             <li><div>Elephant</div></li>
             <li class="last"><div>Cats</div>
               <ul>
                 <li><div>Lion</div></li>
                 <li class="last"><div>Tiger</div></li>
               </ul>
             </li>
           </ul>
         </li>
         <li class="last"><div>Reptiles</div>
           <ul>
             <li><div>Snake</li>
             <li class="last"><div>Turtle</div></li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>

我想要设置这个样式，以便每个级别都缩进，但我也希望在悬停时突出显示每个整个行。当我将鼠标悬停在DIV上时，突出显示仅从包含UL的左侧位置开始：

  ul.tree, ul.tree ul {
    list-style-type: none;
  }

  ul.tree li div:hover {
    background-color: red;
  }

有没有办法达到我想要的效果，而没有为li li，li li li等定义多个规则？可能存在无限多的嵌套级别，因此我发现定义所有这些不同的规则非常难看。

或者有没有办法动态计算嵌套级别（在CSS中？），所以我可以删除UL的填充，而是在每个DIV内放入适量的填充？ / p>

的更新： 的

添加了一个显示我想要的小提琴：http://jsfiddle.net/za3db/

你可以看到它仅在第二级缩进，因为我没有为第三级或第四级定义规则......

Answer 1

我无法使用CSS，但可以使用一点javascript（jQuery）来完成。

$(".tree div").each(function()
{
    var padding = $(this).parents("ol, ul").length * 20 + "px";

    $(this).css("padding-left", padding);
});

See this jsFiddle

Answer 2

这有点你想要的：http://jsfiddle.net/za3db/4/

在每个left:0; right:0 s下放置一个绝对定位的（z-index:-1）伪元素（div）。但是这个结构有两个缺点：

只有当您知道div的高度时才会有效（在我的示例中始终为1.3em = line-height）
当你将鼠标悬停在缩进上时，它不会突出显示，因为div仍然不会从左侧开始。

所以最好的解决方案可能仍然是javascript，或者只是记下所有li li，li li li，......规则。

编辑：我用它玩了一点，并提出了一个新版本，使用隐藏的浮动counter() - 缩进的伪元素：http://jsfiddle.net/za3db/5/。

Answer 3

我知道这个答案有点晚，但是我最近正在研究一棵树并且有完全相同的想法并通过研究几种产品解决它的方式找到了解决方案。下面的代码片段说明了一种可能的解决方案，即为树中的每个项目放置一个 fill div，该项目具有较大的负边距，使其能够覆盖整条线。这是一个非常简单的CSS唯一解决方案。

希望它能帮助您和其他遇到此问题 + 答案的人。

.fill {
  display: none;
  margin-left: -10000px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
}

.title {
  position: relative;
}

.title:hover .fill {
  display: block;
  background-color: #eee;
}

<ul class="tree">
  <li>
    <div class="title">
      <div class="fill"></div>
      Animals
    </div>
    <ul>
      <li>
        <div class="title">
          <div class="fill"></div>
          Birds
        </div>
        <ul>
          <li class="last">
            <div class="title">
              <div class="fill"></div>
              Eagle
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="title">
          <div class="fill"></div>
          Mammals
        </div>
        <ul>
          <li>
            <div class="title">
              <div class="fill"></div>
              Elephant
            </div>
          </li>
          <li class="last">
            <div class="title">
              <div class="fill"></div>
              Cats
            </div>
            <ul>
              <li>
                <div class="title">
                  <div class="fill"></div>
                  Lion
                </div>
              </li>
              <li class="last">
                <div class="title">
                  <div class="fill"></div>
                  Tiger
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="last">
        <div class="title">
          <div class="fill"></div>
          Reptiles
        </div>
        <ul>
          <li>
            <div class="title">
              <div class="fill"></div>
              Snake
            </div>
          </li>
          <li class="last">
            <div class="title">
              <div class="fill"></div>
              Turtle
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS：嵌套列表 - 如何突出显示整行？

3 个答案: