Question

我尝试在更少的时间内实现以下内容：

nav > ul > li:first-child

使用：

nav {   
      ul {
          li:first-child {

然而结果是：

nav ul li:first-child

有人可以解释两个CSS结果之间的区别，并告诉我如何使用less来获得结果“nav＆gt; ul＆gt; li：first-child”

Answer 1

>被称为儿童组合者。

它选择“直接后继/子”，它正好比它的父级低一级，而普通型选择父级下面的所有子元素。

<div id="level-1">
  <div id="level-2">
     <div class="level-3"></div>
     <div class="level-3"></div>
  </div>
</div>

#level-1 > div{} /* <- matches #level-2 div */
#level-1 div{}   /* <-matches #level-2 and both .level-3 divs */

为了澄清，我添加了 Fiddle 。

至于sass，你可以使用：

#level-1{
    > div{
    }
}

Answer 2

CSS中的正常操作是“下降”。当你没有说出不同的关系时，那就是少给你的东西。就像在这种情况下，“孩子的”：

nav {   
    > ul {
        > li:first-child {

或者，“跟随兄弟姐妹”：

nav {   
    + ul {
        + li:first-child {

使用Less的继承问题？

2 个答案: