Question

很抱歉，如果我问的是其他地方已经回答的问题......我找不到答案，也许是因为我不知道怎么问。

但是我试图通过设置ul的类来弄清楚如何影响列表项，所以我只需要调用ul中的类而不必为每个列表项调用类。

我有一个蓝点图标列表和一个绿点图标列表。

我希望能够做到这一点

<ul class="greendot">

  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

与css一样：

ul.greendot {

    list-style-image: url(http://greendot.jpg);
}

谢谢！

Answer 1

我建议您删除UL处的子弹，然后添加背景图像作为每个LI的样式......

样式应如下所示......

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul.greendot li
{
background-image: url(greendot.png);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

并且html正文看起来像这样......

test
<ul class="greendot">
<li>test 1</li>
<li>test 2</li>
</ul>

Answer 2

请参阅，如果您的CSS为ul.greendot，那么它适用于<ul class="greendot"> ....</ul> 如果你的CSS仅用于ul，那么它将适用于ul列表。

<!DOCTYPE html>
<html>
<head>
<style>
  /* only for greendot ul */
  ul.greendot 
  {
    list-style-image:url('http://greendot.jpg');
  }

 /* For both ul */
 ul 
  {
    list-style-image:url('http://greendot.jpg');
  }
</style>
</head>

<body>
<ul class="greendot">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
<ul class="reddot">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
</body>
</html>

影响李而不必每次上课

2 个答案: