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

Question

我有以下 html.

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

我正在使用 bootstrap 警报。警报样式在自定义 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 在警告消息之前显示禁止圆圈，但它也在禁止圆圈之前显示点。该点来自用户代理样式 sheet。我有 <!DOCTYPE html> 中建议的 SO

如何去掉用户代理样式中的点？

Answer 1

您可以使用 CSS 值 none 的列表样式类型属性来删除点。您可以进一步阅读属性 here.

我在下面的代码中使用过它：

.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>

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

Override user agent style for li element

html

css

doctype