时间戳

首页 > 解决方案 > 覆盖 li 元素的用户代理样式

html - 覆盖 li 元素的用户代理样式

问题描述

我有以下html。

   <div class="alert alert-error" role="alert">        
        <ul>
            <li>This is test message.</li>
        </ul>
    </div>

我正在使用引导警报。警报样式在自定义 css 中被覆盖以ban-circle在警报消息之前添加。

.alert {
    padding: 5px;
    margin-bottom: 5px;
    color: white;
}   

.alert-error {
    background-color: rgb(186, 39, 39);
}

    /*Using a Bootstrap glyphicon as ban-circle*/
    .alert-error li:before {
        content: "\e090"; 
        font-family: 'Glyphicons Halflings';
        padding-right: 5px;
    }

UI 在警报消息之前显示禁止圆圈，但它也在禁止圆圈之前显示点。该点来自用户代理样式表。我<!DOCTYPE html>按照这个SO的建议

在此处输入图像描述

如何摆脱用户代理样式中的点？

标签： htmlcssdoctype

解决方案

您可以使用 CSS 值为 none 的 list-style-type 属性来消除点。您可以在此处进一步了解该物业。

我在以下代码中使用了它：

.alert {
    padding: 5px;
    margin-bottom: 5px;
    color: white;
}

.alert-error {
    background-color: rgb(186, 39, 39);
}

/*Using a Bootstrap glyphicon as ban-circle*/

.alert-error li:before {
    content: "\e090";
    font-family: 'Glyphicons Halflings';
    padding-right: 5px;
}

ul {
    list-style-type: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="./style.css">

    <title>Hello, world!</title>
</head>

<body>
    <div class="alert alert-error" role="alert">        
        <ul>
            <li>This is test message.</li>
        </ul>
    </div>

</body>

</html>

推荐阅读