选择各种嵌套容器中的最后一个元素 [英] Selecting the last element among various nested containers

问题描述

有没有办法改善这个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;背景：蓝色;} / *级别3 * / div.case> ul：last-child> li.expanded：last-child> ul> li.expanded：last-child> ul> li.leaf：last-child {font-weight：bold;背景：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;背景：黄色;}  

 < div class =case > < h1>案例0< / h1> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < li class =expanded> < DIV大于2。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < / UL> < /锂> < li class =leaf> < DIV→3。内容（粗体）< / div> < /锂> < / ul>< / div>< div class =case> < h1>案例1< / h1> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < li class =expanded> < DIV大于2。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < / UL> < /锂> < li class =expanded> < DIV→3。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < li class =leaf> < DIV→3。内容（粗体）< / div> < /锂> < / UL> < /锂> < / ul>< / div>< div class =case> < h1>案例2< / h1> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < li class =leaf> < DIV→3。内容< / DIV> < /锂> < / UL> < /锂> < li class =expanded> < DIV→3。内容< / DIV> < UL> < li class =expanded> < DIV大于1。内容a< / div> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容（粗体）< / div> < /锂> < / UL> < /锂> < / UL> < /锂> < / ul>< / div>< div class =case> < h1>案例3< / h1> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < li class =expanded> < DIV大于2。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < / UL> < /锂> < li class =expanded> < DIV→3。内容< / DIV> < UL> < li class =expanded> < DIV大于2。内容< / DIV> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容（粗体）< / div> < /锂> < / UL> < /锂> < / UL> < /锂> < / UL> < /锂> < / ul>< / div>< div class =case> < h1>案例4< / h1> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < li class =expanded> < DIV大于2。内容< / DIV> < UL> < li class =expanded> < DIV大于2。内容< / DIV> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容< / DIV> < /锂> < / UL> < /锂> < / UL> < /锂> < / UL> < /锂> < li class =expanded> < DIV→3。内容< / DIV> < UL> < li class =expanded> < DIV大于1。内容< / DIV> < UL> < li class =leaf> < DIV大于1。内容< / DIV> < /锂> < li class =leaf> < DIV大于2。内容（粗体）LT; / DIV> < /锂> < / UL> < /锂> < / UL> < /锂> < / ul>< / div>< div class =case> < h1>案例5< / h1> < UL> < li class =leaf> < div>内容1< / div> < /锂> < li class =leaf> < div>内容2< / div> < /锂> < li class =leaf> < div>内容3（粗体）< / div> < /锂> < / div>< / div>  

解决方案

如果我正确理解你的问题，你需要将多个 ul 中的最后一个 li > s，其中 ul s中的嵌套层次数量是不可预知的。

包含块中的最后和最深的元素，其中块之前的元素的数量是未知的和不相关的。

这看起来不可能与 选择器2.1 或 选择器3 。

：最后一个孩子，：最后一个类型和第n个-child 伪类在嵌套级别固定时工作。在一个动态环境中，有多个不同的嵌套级别列表，这些选择器规则将会中断。

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

  div.case> ; ul> li：last-child 
  

这会选择最后一个 li 在第二级 ul ：

  div.case> ; ul>李：最后一个孩子> ul> li：last-child 
  

这会选择最后一个 li 在第三级 ul ：

  div.case> ; ul>李：最后一个孩子> ul>李：最后一个孩子> ul> li：last-child 
  

等等...

但是，解决方案可能存在于 选择器4 ，这些浏览器还没有实现：

  li：last-child：not（：has（> li ））
  

这条规则的目标是最后一个孩子 li s没有后裔 li s，这符合您的要求。

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

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

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

Is there a way to improve this css code?

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

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>

解决方案

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.

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

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.

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

div.case > ul > li:last-child

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

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

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

and so on...

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

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

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

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

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

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