Question

是否可以设置所有＆＃34; sale＆＃34;的背景。元素？我设法设置了＆＃34; SALE＆＃34;锚标签背景，如下：

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

我需要为所有其他＆＃34; SALE＆＃34;设置背景。 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

我建议在要设置样式的元素上设置一个类sale。

a.sale {
  background: red;
}

但是，如果您因任何原因无法设置课程，可以使用attribute selectors：

// SALE is at the beginning of the title
a[title^="SALE"] {
  background: red;
}

// SALE is found anywhere in the title
a[title*="SALE"] { 
  background: red;
}

// SALE is found anywhere in the title as a white-space-surrounded word
a[title~="SALE"] {
  background: red;
}

Answer 2

你的选择器是

#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>

Answer 3

您可以使用以下内容来涵盖title =＆＃34; SALE＆＃34;，title =＆＃34; summer SALE＆＃34;和title =＆＃34; SALE winter＆＃34;。

a[title~="SALE"] {
  background-color: blue;
}

或者将课程分配给＆＃39; SALE＆＃39;元件。

Answer 4

只需在要为其设置背景的元素中添加class即可。如果您只想要一段文字来获得背景，只需用span包裹它，然后在其上设置一个class具有所需背景颜色。

Answer 5

我认为这codepen可以帮到你！

<ul>
  <li title="sale asd">ONE</li>
  <li title="sale erw">TWO</li>
  <li title="no">THREE</li>      
</ul>


/**CSS**/
li[title~="sale"]{color:red;}

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

5 个答案: