CSS和直接后代？

Question

我试图瞄准直系后代。我希望第一个ol的直接后代是小写但li里面的嵌套ol不应该应用这种样式，但在下面的例子中，它正在应用。为什么呢？

如何嵌套几个直系后代？

CSS：

nav > ol > li {
  text-transform: lowercase;
}
nav > ol > li > ol > li {
  /* do not apply any text transform */
}

标记：

<nav>
    <ol>
       <li>
           <ol>
               <li></li>
           </ol>
       </li>
    </ol>
</nav>

Answer 1

您需要使用parent selector &

nav{
    &>ol{
        &>li{
            text-transform: lowercase;
            &>ol{
                &>li{
                     //do not apply any text transform
                }
            }
        }
}