3-9问题

<meta charset="UTF-8">
<title>列表</title>
    <style>
        /*此处写代码*/
       li{
            list-style-type:circle;
            list-style-image:url(http://img1.sycdn.imooc.com/climg//58dc9e4e0001ba9000160016.png);
            list-style-position:outside;
       }
            
        .one{
            list-style-type:circle;
        }
    </style>
</head>
<body>
<!-- 此处代码 -->
    <ul>
        <li>电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视</li>
        <li class="one">冰箱</li>
        <li>洗衣机</li>
        <li>空调</li>
    </ul>
</body>
</html>

我的目的是想让冰箱前面出现圆点但失败了，即使是使用class分开后，同时用type和image时，image也会覆盖掉type的效果吗？？

慕丝6937110 2018-02-26

源自：CSS背景和列表 3-11 编程练习

收起

3回答

释梦_ 2018-03-07 15:29:43

.one{

list-style:circle;

}

收起回答

释梦_ 2018-03-07 15:28:42

<style>

/*此处写代码*/

li{

list-style-type: circle;

list-style-image:url(http://img1.sycdn.imooc.com/climg//58dc9e4e0001ba9000160016.png);

list-style-position:outside;

}

.one{

list-style:circle;

}

</style>

</head>

<body>

<ul>

<li>电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视电视</li>

</ul>

</body>

</html>

收起回答

好帮手慕星星 2018-02-26 10:57:32

list-style-type和list-style-image是两个不同的属性，不存在覆盖的问题，你把.one的图片样式设置成none就可以了，

.one {

list-style-type: circle;

list-style-image: none;

}

祝学习愉快~~

收起回答

提问者慕丝6937110 #1

list-style-image: none;？？？为什么一定要这样写，还是不太明白其中的道路

2018-03-03 00:08:43
好帮手慕星星回复提问者慕丝6937110 #2

文字前面的空心五角星是通过list-style-image这个属性来设置的，使用图像来替换列表项的标记，用了这个属性之后， list-style-type属性是不会起作用的，如果你想将图片换成小圆点，只能将 list-style-type

2018-03-04 12:40:00
好帮手慕星星 #3

上面写错了，是只能将 list-style-image这个属性设置为none

2018-03-04 12:40:56