Question

我有使用li标签创建输出的应用程序。我想弄清楚如何将list-style-image用于同一li级别的不同ul标记，同时尽可能简化html。每个li类（绿色，黄色，错误）都应该有自己的图像而不是子弹。正如我所知，在css＆＃34; list-style-image＆＃34;应该是ul的样式，但它在li中不起作用我的HTML

   <body>
  <div>     
     <ul>
        <li class="green">Lorem ipsum dolor sit amet.</li>
        <li class="yellow">Lorem ipsum dolor sit amet.</li>
        <li class="error">Lorem ipsum dolor sit amet.</li>
        <ul>
           <li class="error">Lorem ipsum dolor sit amet.</li>
              <ul>
                 <li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
              </ul> 
        </ul>
        <li class="yellow">Lorem ipsum dolor sit amet</li>
        <li class="green">Lorem ipsum dolor sit amet.</li>
        <li class="green">Lorem ipsum dolor sit amet.</li>
        <li class="error">Lorem ipsum dolor sit amet.</li>
        <ul>
           <li class="error">Lorem ipsum dolor sit amet.</li>
              <ul>
                 <li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
                 <li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
                 <li class="error"><a href="test.html">Lorem ipsum dolor sit amet.</a></li>
              </ul>              
        </ul>            
     </ul>
  </div>

的CSS

.error {
color: white;
font-weight:bold;
background:#FF6666;
 list-style-type:none;
  border-left: 15px solid #E82C0C;
  margin-bottom:1px;
  padding: 5px;

}
.green{
background:#CCFFCC;
 list-style-type:none;
  border-left: 15px solid #7FFF7F;
  margin-bottom:1px;
  padding: 5px;
}
.yellow{
background:#FFFF66;
 list-style-type:none;
  border-left: 15px solid #FFDE59;
  margin-bottom:1px;
  padding: 5px;
}

div {
padding: 10px 10px;
margin-bottom:20px;
min-width: 768px;
max-width: 1024px;
overflow: hidden;
}

http://jsfiddle.net/skiuljko/pzszuo3f/ 感谢

Answer 1

您的问题难以理解，但这是您想要的吗？我只为.error做过，但它会给每个级别的.error元素一个不同的图片。

将class="container"添加到您的第一个div（以提供参考位置）并将其添加到您的css中：

.container > ul > .error {
    list-style-image: url(http://placehold.it/50x30/ff0000);
}
.container > ul > ul > .error {
    list-style-image: url(http://placehold.it/50x30/cc0000);
}
.container > ul > ul > ul > .error {
    list-style-image: url(http://placehold.it/50x30/aa0000);
}

示例：http://jsbin.com/lavorepo/1/edit

Answer 2

你的回答并不完全清楚，但我想你正在寻找这样的事情：您可以使用CSS特异性来定位正确的元素。

.error {
    color: white;
    font-weight:bold;
    background:#FF6666;
      list-style-image: url(http://thekerrcompany.com/wp-content/uploads/2014/05/bulletpoint.png);
    border-left: 15px solid #E82C0C;
    margin-bottom:1px;
    padding: 5px;
}
ul ul .error{
    color: white;
    font-weight:bold;
    background:#FF6666;
    list-style-image: url(http://images1.wikia.nocookie.net/isleoftune/images/1/1b/Bullet_Point.png);
    border-left: 15px solid #E82C0C;
    margin-bottom:1px;
    padding: 5px;
}

或者您可以使用已有的类（.yellow等）来更改列表图像。

DEMO http://jsbin.com/jilolofi/1/edit

HTML列表样式图像在同一ul级别上的不同图像

2 个答案: