最近在学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>
where class="display_BG_Blue"--> 该 ul 标签的每个 li 都应将背景图像显示为蓝色箭头 &&
class="display_BG_Red_arw"--> ul 标签的每一行都应该将背景图像显示为红色箭头
顺便说一句，我在哪里可以轻松找到这些东西的小尺寸背景图像......？
最佳答案
根据父元素选择 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 的直接后代/子元素用红色箭头设置样式，以防止嵌套的 ul/ol 元素中的 li 元素被设置为具有相同背景的样式。
引用资料:
关于css - 每个 ul 标签需要特定的背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12715713/