程序员经验分享-hwhale

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

2024-01-03

如何选择 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>

如果我正确理解你的问题，你想针对最后一个li标记为多个uls，其中嵌套层数uls 是不可预测的。

您需要一个以包含块中“最后一个也是最深的元素”为目标的选择器，其中该块中位于该元素之前的元素数量未知且不相关。

这似乎不可能选择器2.1 https://www.w3.org/TR/CSS21/selector.html or 选择器3 https://www.w3.org/TR/css3-selectors/#selectors.

The :last-child, :last-of-type and 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

等等...

然而，解决方案可能存在于选择器4 https://drafts.csswg.org/selectors/#overview，哪些浏览器尚未实现：

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

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

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

Thanks @BoltClock for help crafting the Selectors 4 rule (see comments).

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssselectors

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