具有意外行为的最后一个CSS选择器类型

我需要标记“li”，文本为“不应选择”无选择，但已选择

CSS是如此的强大

ul ul li:nth-last-of-type(2){
  background: #ff0000;
}

HTML是这样的

<ul>
  <li>bla
    <ul>
      <li>bla bla
      <ul>
        <li>Selected</li>
        <ul>
          <li>Should not be selected</li>
          <li>bla bla bla bla</li>
        </ul>
        <li>bla bla bla</li>
      </ul>
      </li>
      <li>Selected</li>
      <li>bla bla</li>
    </ul>
  </li>
  <li>bla
    <ul>
        <li>Selected</li>
        <li>bla bla</li>
      </ul>
  </li>
  <li>bla
</ul>

布拉

布拉布拉

精选

不应选择
呜呜呜呜呜呜

呜呜呜呜


精选
布拉布拉


布拉

精选
布拉布拉


布拉

您使用的CSS逻辑是错误的。使用“大于”符号（

）表示您正在选择一个直接子项，在本例中，标记不匹配

要实现您的目标，正确的CSS规则是：

ul>li:n最后一种类型（2）{
背景：#ff0000；
}

我必须说这看起来不像是一个可维护的CSS代码，我建议不要这样做。我建议为

li

项使用类，或者如果需要动态，至少为

ul

提供一个类，以便轻松定位

---

我建议您快速阅读一下CSS特异性，或者您的CSS选择器将选择每个

li

，它是其

ul

容器中倒数第二个

li

，并且至少还有一个

ul

祖先。最里面的第一个

li

符合这一要求（尽管有ivalid位标记，

ul

不能是

ul

的子项）

如果只想选择第三个嵌套级别上的项目，而不想选择更深的项目，最简单的方法就是恢复更深嵌套

li

s的样式：

ul ul > li:nth-last-of-type(2){
  background: #ff0000;
}
ul ul ul > li:nth-last-of-type(2){
  background: initial; /* or reset to default LI background value */
}

---

但我同意Johnny Kutnowski的观点，即这样的代码很难维护。我建议对需要特殊样式的列表使用不同的类。

我希望他有更通用的行为。如果我在HTML中的最后一个“li”中再添加一个“ul”，那么在不修改css的情况下不应该选择您的“li”。请注意下面

<ul>
  <li>bla
    <ul>
      <li>bla bla
        <ul>
          <li>Selected</li>

          <li>
            <ul>
              <li>Should not be selected</li>
              <li>Bla bla bla bla bla</li>
            </ul>
          </li>
          <li>must be selected</li>
          <li>bla bla bla bla</li>
          <li>bla bla bla</li>
        </ul>
      </li>
      <li>Selected</li>
      <li>bla bla</li>
    </ul>
  </li>
  <li>bla
    <ul>
        <li>Selected</li>
        <li>bla bla</li>
      </ul>
  </li>
  <li>bla</li>
</ul>

布拉

布拉布拉

精选


不应选择
呜呜呜呜呜呜呜呜


必须选择
呜呜呜呜呜呜
呜呜呜呜


精选
布拉布拉


布拉

精选
布拉布拉


布拉

解决方案是：ul>li:nth-last类型（2）{background:initial；}，但我不想这样做。如果我在层次结构中添加了另一个ul，我将不得不在css中添加一个ul，从而使其更具吸引力。ul>li:n最后一个类型（2）{background:initial；}关于错误的逻辑，是输入错误。是的，它需要是动态的。我该怎么办？