css - 每个 ul 标签都需要特定的背景图片

Question

这些天我正在学习CSS..

我正在使用嵌套的 ul li，您能告诉我如何为每个 Ul 实现相同的背景图像吗？下面是代码：

<ul class="display_BG_Blue_arw">
  <li>Coffee</li>
  <li>Tea
    <ul class="display_BG_Red_arw">
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

其中 class="display_BG_Blue" --> ul 标记的每个 li 都应将背景图像显示为蓝色箭头 &&

class="display_BG_Red_arw" --> ul 标记的每个 li 都应将背景图像显示为红色箭头

顺便说一句，我在哪里可以轻松找到这些东西的小尺寸背景图像..？

Answer 1

li根据父元素选择元素：

.display_BG_Blue_arw > li {
    background-image: url(/path/to/blue_arrow.png);
    background-repeat: no-repeat; /* or whatever... */
    background-position: 0 50%; /* or whatever... */
}

.display_BG_Red_arw > li {
    background-image: url(/path/to/red_arrow.png);
    background-repeat: no-repeat; /* or whatever... */
    background-position: 0 50%; /* or whatever... */
}

组合器的使用>是指定只有那些li直接属于 的后代/子元素的元素.display_BG_Red_arw将使用红色箭头设置样式，以防止li嵌套ul/ol元素中的元素被设置为具有相同背景的样式。

参考：

• CSS（第 3 级）组合器，位于 W3.org。
• CSS（第 3 级）选择器，位于 W3.org。

Answer 2

ul.display_BG_Blue_arw > li{
  background-image: url(/path/to/blue_arrow.png);
  background-repeat: no-repeat; /* or whatever... */
  background-position: 0 50%; /* or whatever... */
}

ul > li ul.display_BG_Blue_arw li{
  background-image: url(/path/to/blue_arrow.png);
  background-repeat: no-repeat; /* or whatever... */
  background-position: 0 50%; /* or whatever... */
}

或者

ul > li ul li{
  background-image: url(/path/to/blue_arrow.png);
  background-repeat: no-repeat; /* or whatever... */
  background-position: 0 50%; /* or whatever... */
}