在各种嵌套容器中选择最后一个元素-前端问题

Selecting the last element among various nested containers(在各种嵌套容器中选择最后一个元素)

本文介绍了在各种嵌套容器中选择最后一个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在 CSS 中选择最后一个也是最深的元素?

How can I select the last and deepest element in CSS?

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

Is there a way to improve this css code?

您对深树提出了什么解决方案?(~15-25).

What solution do you proposed for a deep tree? (~15-25).

我避免使用 javascript.但欢迎使用 SASS 解决方案.(也许使用 @for?)

I'm avoiding using javascript. But SASS solutions are welcome.(maybe using @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>

推荐答案

如果我正确理解你的问题，你想定位多个 ul 中的最后一个 li 标签，其中 uls 中的嵌套层数是不可预测的.

If I understand your question correctly, you want to target the last li tag in multiple uls, where the number of nesting levels in the uls is unpredictable.

您需要一个选择器，该选择器以包含块中的最后和最深的元素"为目标，其中块中它之前的元素数量是未知且不相关的.

You want a selector that targets the "last and deepest element" in a containing block where the number of elements preceding it in the block are unknown and irrelevant.

这似乎不适用于 Selectors 2.1 或 选择器 3.

This doesn't appear to be possible with Selectors 2.1 or Selectors 3.

:last-child、:last-of-type 和 nth-child 伪类在嵌套级别固定时工作.在有多个不同嵌套级别的列表的动态环境中，这些选择器规则将被破坏.

The :last-child, :last-of-type and nth-child pseudo-classes work when the nesting levels are fixed. In a dynamic environment where there are multiple lists of varying nesting levels these selector rules will break.

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

This will select the last li in the first level ul:

div.case > ul > li:last-child

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

This will select the last li in the second level ul:

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

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

This will select the last li in the third level ul:

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

等等……

但是，Selectors 4，哪些浏览器尚未实现:

A solution, however, may exist in Selectors 4, which browsers haven't yet implemented:

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

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

This rule targets last child lis that have no descendant lis, which matches your requirement.

然而，现在，如果您知道每个 ul 容器的嵌套级别，您可以将一个类应用于每个目标 li.

For now, however, if you know the nesting level for each of your ul containers you can apply a class to each targeted li.

^{感谢 @BoltClock 帮助制定 Selectors 4 规则(见评论).}

这篇关于在各种嵌套容器中选择最后一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！