css - 设置嵌套列表元素的背景颜色

Question

是否可以设置所有“sale”元素的背景？我设法设置了“SALE” anchor 标记背景，如下所示:

#navigation li:last-child a {
    border-right: none;
    background: red;
}

我需要为所有其他“SALE”li 元素设置背景。

如何使用 CSS 为这些元素设置背景？我想我可能需要使用 JQuery，不过 CSS 会更好。

<div id="navigation" class="cf">
<div id="hamburger_wrap">
    <a href="#" id="hamburger">Main Menu</a>
</div>
<ul style="display: -webkit-flex;">
    <li class="active">
        <a title="Home" href="/" class="active ">
          <b class="ico-home">Home</b>
        </a>
    </li>
    <li>
        <a title="Living Room" href="/Living-Room-Furniture" class="hasChildren ">Living Room</a>
        <ul class="dropdown" style="display: none;">
            <li>
                <a title="By Living Room Range" href="/Living-Room-Furniture">By Living Room Range</a>
            </li>
            <li>
                <a title="Nest of Tables" href="/Nest-Of-Tables">Nest of Tables</a>
            </li>
            <li>
                <a title="Coffee Tables" href="/Coffee-Tables">Coffee Tables</a>
            </li>

        </ul>
    </li>
    <li>
        <a title="SALE" href="Top-Sale-items" class="hasChildren ">SALE</a>
        <ul class="dropdown" style="display: -webkit-flex;">
            <li>
                <a title="SALE Beds" href="/Sale-Beds">SALE Beds</a>
            </li>
            <li>
                <a title="SALE Mattresses" href="/Sale-Mattresses">SALE Mattresses</a>
            </li>
            <li>
                <a title="SALE Bed Frames" href="/Sale-Bed-Frames">SALE Bed Frames</a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

您的选择器是

#navigation > ul > li:last-child a

演示:

#navigation > ul > li:last-child a {
  background-color: lightgreen;
}

<div id="navigation" class="cf">
<div id="hamburger_wrap">
    <a href="#" id="hamburger">Main Menu</a>
</div>
<ul>
    <li class="active">
        <a title="Home" href="/" class="active ">
          <b class="ico-home">Home</b>
        </a>
    </li>
    <li>
        <a title="Living Room" href="/Living-Room-Furniture" class="hasChildren ">Living Room</a>
        <ul class="dropdown" style="display: none;">
            <li>
                <a title="By Living Room Range" href="/Living-Room-Furniture">By Living Room Range</a>
            </li>
            <li>
                <a title="Nest of Tables" href="/Nest-Of-Tables">Nest of Tables</a>
            </li>
            <li>
                <a title="Coffee Tables" href="/Coffee-Tables">Coffee Tables</a>
            </li>

        </ul>
    </li>
    <li>
        <a title="SALE" href="Top-Sale-items" class="hasChildren ">SALE</a>
        <ul class="dropdown">
            <li>
                <a title="SALE Beds" href="/Sale-Beds">SALE Beds</a>
            </li>
            <li>
                <a title="SALE Mattresses" href="/Sale-Mattresses">SALE Mattresses</a>
            </li>
            <li>
                <a title="SALE Bed Frames" href="/Sale-Bed-Frames">SALE Bed Frames</a>
            </li>
        </ul>
    </li>
</ul>