Question

如何选择CSS中最后一个最深的元素？

有没有办法改进这个css代码？

您为深树提出了什么解决方案？（〜15-25）。

我在避免使用javascript。但SASS解决方案是受欢迎的。（可能使用@for？）

/*level 1*/

div.case > ul:last-child > li.leaf:last-child > div {
  font-weight: bold;
  background: red;
}
/*level 2*/

div.case > ul:last-child > li.expanded:last-child > ul > li.leaf:last-child {
  font-weight: bold;
  background: blue;
}
/*level 3*/

div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child {
  font-weight: bold;
  background: green;
}
/*level 4*/

div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child {
  font-weight: bold;
  background: yellow;
}

<div class="case">
  <h1>Case 0</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="leaf">
      <div>3. content (bold)</div>
    </li>
  </ul>
</div>

<div class="case">
  <h1>Case 1</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
        <li class="leaf">
          <div>3. content (bold)</div>
        </li>
      </ul>
    </li>
  </ul>
</div>


<div class="case">
  <h1>Case 2</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="leaf">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
        <li class="leaf">
          <div>3. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="expanded">
          <div>1. content a</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content (bold)</div>
            </li>
          </ul>
        </li>

      </ul>
    </li>
  </ul>
</div>


<div class="case">
  <h1>Case 3</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="expanded">
          <div>2. content</div>
          <ul>
            <li class="expanded">
              <div>1. content</div>
              <ul>
                <li class="leaf">
                  <div>1. content</div>
                </li>
                <li class="leaf">
                  <div>2. content (bold)</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="case">
  <h1>Case 4</h1>
  <ul>
    <li class="expanded">
      <div>1. content</div>
      <ul>
        <li class="leaf">
          <div>1. content</div>
        </li>
        <li class="leaf">
          <div>2. content</div>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>2. content</div>
      <ul>
        <li class="expanded">
          <div>2. content</div>
          <ul>
            <li class="expanded">
              <div>1. content</div>
              <ul>
                <li class="leaf">
                  <div>1. content</div>
                </li>
                <li class="leaf">
                  <div>2. content</div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="expanded">
      <div>3. content</div>
      <ul>
        <li class="expanded">
          <div>1. content</div>
          <ul>
            <li class="leaf">
              <div>1. content</div>
            </li>
            <li class="leaf">
              <div>2. content(bold)</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="case">
  <h1>Case 5</h1>
  <ul>
    <li class="leaf">
      <div>content 1</div>
    </li>
    <li class="leaf">
      <div>content 2</div>
    </li>
    <li class="leaf">
      <div>content 3(bold)</div>
    </li>
  </ul>
</div>

Answer 1

如果我正确理解了您的问题，您希望定位多个li中的最后一个ul标记，其中ul中的嵌套级别数是不可预测的。

你想要一个选择器，它以一个包含块中的“最后和最深元素”为目标，其中块中前面的元素数量是未知且无关紧要的。

Selectors 2.1或Selectors 3似乎无法做到这一点。

嵌套级别修复后，:last-child，:last-of-type和nth-child伪类可以正常工作。在动态环境中，有多个不同嵌套级别的列表，这些选择器规则将会中断。

这将选择第一级li中的最后一个ul：

div.case > ul > li:last-child

这将选择第二级li中的最后一个ul：

div.case > ul > li:last-child > ul > li:last-child

这将选择第三级li中的最后一个ul：

div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child

依旧......

然而，Selectors 4中可能存在一个解决方案，浏览器尚未实现：

li:last-child:not(:has(> li))

此规则针对的是没有后代li的最后一个孩子li，符合您的要求。

但是，现在，如果您知道每个ul容器的嵌套级别，则可以为每个目标li应用一个类。

^{感谢@BoltClock帮助制作选择器4规则（请参阅注释）。}

选择各种嵌套容器中的最后一个元素

1 个答案: