Question

这些天我正在学习CSS ..

我使用嵌套ul li，你能告诉我们如何获得特定于每个UI的相同背景图像吗？以下是代码：

<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” - ＆gt;该ul标签的每个li应显示背景图像为蓝色箭头＆amp;＆amp;

class =“display_BG_Red_arw” - ＆gt;该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个元素将使用红色箭头设置样式，以防止{{ 1}}嵌套li / ul元素中的元素使用相同的背景设置样式。

参考文献：

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

需要每个ul标签的特定背景图像

2 个答案: