仅使用 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;
}

小提琴