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

必须是这样的：

.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 */
    }
}

Answer 3

澄清：

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>

LESS-CSS：

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

    & > &__item{
        color: green;

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

您可以查看此示例以了解其工作原理

通过使用带BEM的LESS嵌套规则</li>来定位第一级<li>

3 个答案: