html - 目标第一级通过在 BEM 中使用 LESS 嵌套规则

Question

我有以下 HTML：

<ul class="header-menu">
    <li class="header-menu__item"><a href="index.html">home</a></li>
    <li class="header-menu__item header-menu__item--split"><a href="menu.html">menu</a></li>
    <li class="header-menu__item">
        <a href="#">features</a>
        <ul class="header-menu--dropdown">
            <li><a href="menu.html">Menu</a></li>
        </ul>
    </li>
</ul>    <!-- end header-menu -->

我有这个 css，是否可以用更少的方式做这样的事情：

.header-menu{}
    .header-menu .header-menu__item{}
    .header-menu > .header-menu__item{}

我会像这样用 BEM 用 LESS 写它：

.header-menu{
    &__item{
        display: inline-block;
        float: left;
    }

    > &__item{ // How can I target first <li>(s) here
    }
}

如何将 CSS 规则应用于第一<li>级？试过> &__item了，但似乎不起作用。

更新：由我自己修复。我错过&了前面> &__item

.header-menu{
    &__item{
        display: inline-block;
        float: left;
    }

    & > &__item{ <--- I miss '&' here
    }
}

Answer 1

演示 - http://jsfiddle.net/s191e6qp/

目标<a>标签

.header-menu {
    > li a {
      color:red; /* first level */
    }
    li li a {
      color:green; /* second level */
    }
}

Answer 2

澄清：

HTML：

<ul class="header-menu">
    <li class="header-menu__item">First level item (first item in this level)</li>
    <li class="header-menu__item">
        First level item
        <ul>
            <li class="header-menu__item">Second level item</li> 
            <li class="header-menu__item">Second level item</li>
        </ul>
    </li>
    <li class="header-menu__item">First level item</li>
</ul>

少CSS：

.header-menu{
    &__item{
        color: red;
    }

    & > &__item{
        color: green;

        &:first-child{
            color: grey;    
        }
    }
}

你可以看看这个例子，看看它是如何工作的

Answer 3

它必须是这样的：

.header-menu{
    &__item{
        display: inline-block;
        float: left;
    }

    > &__item:first{ /* :first will let you select only first li */
    }
}

或者

.header-menu{
    &__item{
        display: inline-block;
        float: left;
    }

    > li:first{ 
          /* :first will let you select only first li */
    }
}