如何让ol的序号的背景颜色随里面的li变化

最新推荐文章于 2025-03-23 00:39:58 发布

原创最新推荐文章于 2025-03-23 00:39:58 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css

笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用CSS中的list-style-position属性解决列表编号与背景颜色冲突的问题，并给出具体代码示例。

今天做实验遇到了一个头疼的问题，要用CSS实现如下效果：
在这里插入图片描述
而且使用有序列表做，但是，因为li的背景颜色不同，很奇怪，一开始他是这样的

li的样式显然不能影响到ol的序号，但是只需要设置list-style-position: inside;就可以实现效果了。

list-style-position属性指定标记框在主体块框中的位置。不经常用，记录一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
* {
	padding:0;
	margin:0
}
ul, ol {
	list-style:none
}
ul {
	padding:0
}
a {
	cursor:pointer
}
.music ol {
    border:1px solid #f5f5f5;
    width:400px;
    margin:0 auto
}
.music ol li {
    height:50px;
    line-height:50px;
    text-indent:1em;
    color:#09C;
    position:relative;
    list-style-position: inside;//加上这一行，解决问题！
}
.music ol li span {
    width:20px;
    height:20px;
    background-color:red;
    position:absolute;
    top:10px;
    right: 100px;
    background:url(up.jpg) top left/ 20px 20px
}
.music ol li:nth-child(2n)  span{
background:url(down.jpg) top left/ 20px 20px
}
.music ol li:nth-child(2n) {
background-color:#f5f5f5
}
</style>
<body>
<div class="music">
  <ol>
    <li> <a>小苹果</a> <span> </span></li>
    <li><a>后会有期</a> <span> </span></li>
    <li><a>因为爱情</a> <span> </span></li>
    <li><a>会不会</a> <span> </span></li>
    <li><a>古柏</a> <span> </span></li>
  </ol>
</div>
</body>
</html>