如何改变无序列表的颜色

最新推荐文章于 2023-11-06 16:11:46 发布

weixin_30855099

最新推荐文章于 2023-11-06 16:11:46 发布

阅读量3.4k

点赞数 5

原文链接：http://www.cnblogs.com/cswzl/p/5935599.html

版权

默认的无序列表的符号样式都是一个小的黑色实心圆点。通过list-style-type 可以改变样式的形状，比如圆圈，方块和其他自定义的图片
但是有些时候，为了突出，我们需要将黑色圆点，变化成为其他颜色，比如红色、黄色等
一、简单写一个无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">

</style>
</head>
<body>
<div>
<ul>

<li><p>我的颜色是红色</p></li>
<li><p>我的颜色是红色</p></li>
<li><p>我的颜色是红色</p></li>

</ul>
</div>
</body>
</html>

二、设置其css样式，将ul列表的样式设置成为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><p>我的颜色是红色</p></li>
            <li><p>我的颜色是红色</p></li>
            <li><p>我的颜色是红色</p></li>

        </ul>
    </div>
</body>
</html>

可以发现，列表的小黑点虽然变成了我们需要的红色，但是文字也随之变成了红色，因为css样式是叠加的样式，此时，我们只需要将文字的颜色，设置成原来的黑色，即可达成效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul{
            color: red;
        }
        p{
            color:black;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><p>我的颜色是红色</p></li>
            <li><p>我的颜色是红色</p></li>
            <li><p>我的颜色是红色</p></li>

        </ul>
    </div>
</body>
</html>

如图，这就实现了小红圆点，黑色文字。

转载于:https://www.cnblogs.com/cswzl/p/5935599.html

weixin_30855099

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
如何改变无序列表的颜色

默认的无序列表的符号样式都是一个小的黑色实心圆点。通过list-style-type 可以改变样式的形状，比如圆圈，方块和其他自定义的图片但是有些时候，为了突出，我们需要将黑色圆点，变化成为其他颜色，比如红色、黄色等一、简单写一个无序列表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫