CSS改变列表样式的颜色答案

【问题标题】：CSS changing the colour of the list styleCSS改变列表样式的颜色
【发布时间】：2013-01-14 12:28:54
【问题描述】：

你好，这可能是一个简单的修复。所以我有几个<ul>，每个都有15+ <li>..

我的一些 html。

<ul>
  <li><span>Government Gazette, No. 32320 of 12 June 2009. Forestry Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 34267 of 10 May 2011. Charted Accountancy Sector Charter. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35400 of 1 June 2012. Property Sector Charter. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35423 of 06 June 2012. Information Technology and Telecommunication Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 35754 of 5 October 2012. Revised Broad-Based Black Economic Empowerment Codes of Good Practice and B-BBEE Technical Assitance Guideline. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 35907 of 23 November 2012. Broad-Based Black Economic Empowerment Amendment Bill. s.l.:s.n.</li>
  <li><span>Government Gazette, No. 35914 of 26 November 2012. Financial Services Sector Charter. s.l.:s.n.</span></li>
  <li><span>Government Gazette, No. 53 of 2003. Broad-Based Black Economic Empowerment Act. s.l.:s.n.</span></li>      
</ul>

我不得不缩短它。

我的CSS：

 #bee_wwwh_box ul{
list-style-type:upper-roman;
margin-bottom: 10px;
margin-top: 15px;
margin-left: 30px;
margin-right: 450px;
 }
 #wwwh_box li{
font-size: 18px;
    color: #16a6b6;
letter-spacing: 1px;
margin-bottom: 10px;
margin-top: 15px;
margin-left: 30px;
margin-right: 30px;
 }
 #wwwh_box li span {
color: #41413e;
 }

如您所见，我已将所有文本包装在  中，然后尝试仅更改罗马符号的颜色，以便人们可以清楚地看到有项目列表的位置。只有它改变了整个列表文本？？我无法判断它的正面或反面？

我做错了吗？

【问题讨论】：

试着在这里阅读一个很好的长解释：456bereastreet.com/archive/201105/styling_ordered_list_numbers
谢谢我现在快点看完
感谢所有帮助我找到问题的人，很抱歉它是如此明显

标签： css list

【解决方案1】：

它有效，您缺少一些关闭  标记

HTML：

<div id="wwwh_box">
    <ul>
        <li><span>Government Gazette, No. 32320 of 12 June 2009. Forestry Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 34267 of 10 May 2011. Charted Accountancy Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35400 of 1 June 2012. Property Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35423 of 06 June 2012. Information Technology and Telecommunication Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35754 of 5 October 2012. Revised Broad-Based Black Economic Empowerment Codes of Good Practice and B-BBEE Technical Assitance Guideline. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35907 of 23 November 2012. Broad-Based Black Economic Empowerment Amendment Bill. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 35914 of 26 November 2012. Financial Services Sector Charter. s.l.:s.n.</span></li>
        <li><span>Government Gazette, No. 53 of 2003. Broad-Based Black Economic Empowerment Act. s.l.:s.n.</span></li>
    </ul>
</div>

CSS：

#bee_wwwh_box ul {

    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 450px;
}
#wwwh_box li {
    list-style-type:upper-roman;
    font-size: 18px;
    color: #16a6b6;
    letter-spacing: 1px;
    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 30px;
}
#wwwh_box li span {
    color: #41413e;
}

http://jsfiddle.net/xaKsU/

【讨论】：

真的感谢您发现我刚刚在您的示例中看到的我做了一些正则表达式来查找和替换所有内容，但似乎没有用！高五
我也稍微改了一下css，复制我的css和html，你的html没有包装div，id为#wwwh_box

【解决方案2】：

您对某些元素没有关闭 。您打开了它们，但没有关闭它们。这可能是个问题...

【讨论】：

是的，我知道你的意思，但我使用 sublime，所以我所做的是将所有 <li> 替换为 <li> 并将所有 </li> 替换为 </li> 通过 gsub 快速阅读表明所有跨度都必须关闭..

【解决方案3】：

我认为是因为您的一些 SPAN 标签尚未关闭？你有他们的开始标签，但有些没有结束标签。

【讨论】：

【解决方案4】：

首先，您的 标签没有关闭。

如果这不能解决您的问题，您可以尝试其他一些方法。一种选择是使用图像代替列表项目符号（请参阅'list-item-image'）：

li { list-style-image: url(images/yourimage.jpg); }

另一种可能性是使用li:before 选择器，尽管这不适用于旧版本的 IE。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

有关这两种方法的更多信息，请参阅this question。

【讨论】：