css - 如何在本地覆盖全局 CSS 类

Question

我为列表定义了一个全局变量，并在我的 html 中引用

ol>li::before, ul>li::before {
color: #FFFFFF;
content: '\00A7';
display: inline-block;  
position: absolute;
}

我试图在我的 html 中覆盖它，因为我必须删除这一行：

content: '\00A7';

如果我只是在本地文件中使用它，它不会覆盖。关于如何解决这个问题的任何建议？

标签： cssglobal-variablesoverridinglocal

Answer 1

你有三种方法来实现它。

1. !important在您的 css 文件中添加您自己的 css

ol>li::before, ul>li::before {
content: '\00A7' !important;
} 

2. 在您的 html 中的全局 css 之后添加 css

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="my.css">

3. 在您的 html 元素中添加标签

<ol my-tag>
...
</ol>

ol[my-tag]>li::before{
    // your own css
}