1

私は次の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
    }
}

<li>CSS ルールを最初のレベルに適用するにはどうすればよいですか? 試してみ> &__itemましたが、うまくいかないようです。

更新：自分で修正しました。&の前で見逃した> &__item

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

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

3 に答える 3

0

明確にするために：

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;    
        }
    }
}

この例を見て、それがどのように機能するかを確認できます

于 2014-12-15T10:36:45.923 に答える
0

次のようにする必要があります。

.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 */
    }
}
于 2014-12-15T09:13:00.543 に答える