具有意外行为的第n类CSS选择器

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的逻辑是错误的。使用“大于”符号（>）意味着您正在选择直接孩子，在这种情况下，标记不匹配。

要实现你想要的，正确的CSS规则是：

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

我MUST说，这似乎是一个可维护的CSS代码没有，并会建议反对。我建议使用li项目的类，或者如果你需要它是动态的，至少可以给ul一个类，以轻松定位。

我建议你快速了解CSS具体，CSS-Tricks或Smashing Magazine

Answer 2

你的CSS选择器将选择每个li这是第二个最后li在其ul容器和具有至少一个更多ul祖先。第一个li符合这个要求（尽管在那里有标记的ivalid位，ul不能是ul的子节点）。

如果你只需要选择3号嵌套级项目，但不深，最简单的方法就是恢复样式更深嵌套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 */ 
} 

但我约翰尼Kutnowski同意这样的代码很难维护。我建议为需要特殊样式的列表使用不同的类。

Answer 3

我希望他有一个更通用的行为。如果我在HTML中添加一个“ul”最后一个“li”，那么不必选择你的“li”而不必修改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>