yanglu150826 2020-02-29 18:37 采纳率: 0%
浏览 232

设置清除浏览器默认样式后,列表符号为啥还在?

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--清除浏览器默认样式-->
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        outline: none;
    }
    .bg{
        width: 600px;
        height: 550px;
        background-image: repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
        margin: 50px auto;
        padding: 50px 40px 40px 40px;
        border-radius: 50%;
        border: 10px solid #ccc;
    }
    ul {
        width: 372px;
        height: 530px;
        background: #fff;
        margin: 0 auto;
        border-radius: 30px;
        box-shadow: 15px 15px 12px #000;
    }
    ul li {
        width: 372px;
        height: 55px;
        background: #504d58 url("images/yinfu.png") no-repeat 70px 20px;
        margin-bottom: 2px;
        font-size: 18px;
        color: #d6d6d6;
        line-height: 55px;
        text-align: center;
        font-family: "微软雅黑";
    }
    ul .tp {
        width: 372px;
        height: 247px;
        background: #fff;
        background-image: url(images/yinyue.jpg), url(images/wenzi.jpg);
        background-repeat: no-repeat;
        background-position: 87px 16px, 99px 192px;
        border-radius: 30px 30px 0 0;
    }
    ul .yj{
        border-radius: 0 0 30px 30px;
    }
</style>
</head>
<body>
<div class="bg">
    <ul>
        <li class="tp"></li>
        <li>曾经的你</li>
        <li>蓝莲花</li>
        <li>last dance</li>
        <li>浪味仙</li>
        <li class="yj">是心动啊</li>
    </ul>
</div>
</body>

如上,设置了清除列表符号,但没有起作用,运行效果如下:
图片说明
暂时解决方法是,给ul标签添加
list-style: none;
padding: 0;
最终得到了想要的效果,如下图
图片说明

所以,请问为啥一开始设置的 全局清除列表符号、内边距为0 在此处无效?

  • 写回答

1条回答 默认 最新

  • lshen01 2023-03-17 08:33
    关注

    参考GPT和自己的思路:

    首先需要注意的是,你在 CSS 样式中全局清除了列表符号和内边距,在某些情况下这些样式是会被继承的,比如在 ul 元素上设置了 list-style:none,但是在 li 元素上又重新设置了样式,那么 li 上的样式将会对 ul 产生继承。因此在这种情况下,需要在 li 上单独设置 list-style:none。

    其次,可能是因为浏览器在默认样式中对 ul 元素设置了 margin 和 padding 的值,这些默认值可能会覆盖你在全局样式中设置的值,所以在这种情况下需要单独为 ul 元素设置 margin 和 padding 的值。

    综上所述,为了确保列表符号和内边距被清除,可以在 ul 上添加以下样式:

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    

    这样就可以保证 ul 元素上的样式优先级最高,上面的全局样式和浏览器默认样式都会被覆盖。

    评论

报告相同问题?

悬赏问题

  • ¥15 gwas 分析-数据质控之过滤稀有突变中出现的问题
  • ¥15 没有注册类 (异常来自 HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))
  • ¥15 知识蒸馏实战博客问题
  • ¥15 用PLC设计纸袋糊底机送料系统
  • ¥15 simulink仿真中dtc控制永磁同步电机如何控制开关频率
  • ¥15 用C语言输入方程怎么
  • ¥15 网站显示不安全连接问题
  • ¥15 51单片机显示器问题
  • ¥20 关于#qt#的问题:Qt代码的移植问题
  • ¥50 求图像处理的matlab方案