具有意外行爲的第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>