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>

因此，在此列表中，我们希望将“操作”，“呼叫中心”和“培训”更改为红色，但将其他LI保留为原样。纯CSS，没有JavaScript或类似。

我们尝试了许多＆gt;的组合。 +〜运算符并没有得到预期的结果。我们只能针对儿童UL的LIs，但我们正试图避免这种“解决方法”。

我们尝试了类似问题中的所有解决方案，但它们只是“相似”，没有给出预期的结果。您应该看到的所需结果是红色的顶级LI和其他（“视频”，“链接”等）应为黑色。

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

Answer 1

问题是某些属性，如color，从父母到孩子都是inherited。

因此，如果您在color: red上使用li，则其内部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;
}

fiddle

仅使用CSS定位父LI

2 个答案: