Question

我需要标签“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>

Answer 1

您使用的CSS逻辑错误。使用＆＃34;大于＆＃34;符号（>）表示您正在选择直接子项，在这种情况下，标记不匹配。

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

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

我必须说这看起来不像是一个可维护的CSS代码，并建议反对它。我建议使用li项的类，或者如果你需要它是动态的，至少要给ul一个类轻松定位。

我建议快速阅读 CSS特异性，CSS-Tricks或Smashing Magazine

Answer 2

您的CSS选择器会选择其li容器中最后一个li的每个ul，并且至少有一个更多ul祖先。第一个li符合此要求（尽管标记位置无效，ul无法成为ul的孩子。

如果您只想在第3个嵌套级别选择项目，而不是更深层次，那么最简单的选择就是恢复更深层嵌套li的样式：

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 这样的代码很难维护。我建议对需要特殊样式的列表使用不同的类。

Answer 3

我希望他有一个更通用的行为。如果我再添加一个＆＃34; ul＆＃34;最后一个＆＃34; li＆＃34;在HTML中，然后你的＆＃34; li＆＃34;不必修改css就不应该选择。请注意以下内容。

<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>

具有意外行为的nth-last-of-type CSS选择器

3 个答案: