如何为<ol>下全部<li>元素应用背景剪贴板图片？

你的问题很典型——当你把背景样式加在<ol>元素上时，背景图只会属于整个列表容器，而不是每个列表项，所以看起来只有第一个<li>能看到它（因为它刚好在容器背景的起始位置）。要让每个列表项都显示这个剪贴板图标，我们只需要调整CSS的选择器，把背景样式绑定到<ol>下的每个<li>即可，不用给每个<li>单独加类，完全符合你想在<ol>层级控制的需求。

修改后的CSS代码 #

ol { list-style: none; padding: 0; margin: 0; counter-reset: orderedlist; }
ol>li { counter-increment: orderedlist; padding-left: 1.4em; line-height: 1.5; }
ol>li:before { content: counter(orderedlist)"."; display: inline-block; width: 1.52em; }
/* 调整选择器，把背景样式应用到ol下的每个li */
ol.action-item > li { 
  background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png); 
  background-position: 15px 0px; 
  background-repeat: no-repeat; 
  background-size: 1.4em; 
}

为什么原来的写法不行？ #

原来的.action-item选择器是指向<ol>元素本身的，背景图会作为整个列表容器的背景存在，只会渲染一次。而我们需要的是每个<li>都拥有独立的背景图，所以通过ol.action-item > li这个后代选择器，就能精准选中带有action-item类的<ol>下的所有直接子元素<li>，给它们各自加上背景样式。

效果说明 #

修改后，每个列表项的左侧都会显示你设置的剪贴板图标，而且HTML结构完全不用改动，依然保持<ol class="action-item">的写法，完美实现了你想要的“在<ol>层级控制所有<li>样式”的需求。

内容的提问来源于stack exchange，提问作者Sam Jefferies