僅使用 CSS 定位父級 LI

Question

我試圖只針對“主要”UL 的直接子代的 LI。 我已經看到使用 JS 或通過稍后操縱子 LI 來逆轉父 UL 效果的解決方案，但這不是我們要尋找的。 （例如，將文本放大到 1.2em 需要我們將文本縮小 0.8em 或任何數學運算，這就是為什么我們需要孩子不受影響的原因）

<ul class="siteMapMain">
   <li>Operations
    <ul class="siteMapSecond">
      <li>Sales Development</li>
    </ul>
   </li>
   <li>Call Center</li>
   <li>Training
     <ul class="siteMapSecond">
       <li>Work Instruction</li>
     </ul>
   </li>
 </ul>

因此，在此列表中，我們要將“Operations”、“Call Center”和“Training”更改為紅色，但保留其他 LI。 純 CSS，沒有 JavaScript 或類似內容。

我們嘗試了多種 > + ~ 運算符的組合，並沒有得到想要的結果。 我們能夠只針對兒童 UL 的 LI，但我們正在努力避免這種“變通”。

我們嘗試了類似問題中的所有解決方案，但它們只是“相似”，沒有給出預期的結果。 您應該看到的預期結果是頂級 LI 為紅色，其他（“視頻”、“鏈接”等）應為黑色。

如果需要 JsFiddle： http : //jsfiddle.net/billynair/r4h7z84g/

Answer 1

問題是一些屬性，比如color ，是從父母繼承給孩子的。

因此，如果您在li上使用color: red ，其內部ul子項也將繼承該樣式。

您可以使用initial關鍵字恢復初始值。

ul.siteMapMain > li {
  color: red;
}
ul.siteMapMain > li > * {
  color: initial;
}

 ul.siteMapMain > li{ color: red; } ul.siteMapMain > li > * { color: initial; }

 <ul class="siteMapMain"> <li>Operations <ul class="siteMapSecond"> <li>Sales Development</li> </ul> </li> <li>Call Center</li> <li>Training <ul class="siteMapSecond"> <li>Videos</li> <li>Links</li> <li>Printable</li> <li>Work Instruction</li> </ul> </li> <li>Policy and Procedure</li> <li>Documents & Templates</li> <li>Links</li> <li>Reporting</li> <li>Media <ul class="siteMapSecond"> <li>Audio</li> <li>Video</li> <li>Photo</li> </ul> </li> </ul>

Answer 2

您將需要兩個規則，否則樣式將被繼承（這就是它被稱為級聯的原因）：

ul li {
    color: black;
}

ul.siteMapMain > li {
    color:red;
}

小提琴