> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/di-yi-ci-ti-yan-dao-important-zai-css-li-zhen-de-you-yong.md).

# 第一次体验到important在css里真的有用

* 抖音：<https://v.douyin.com/iUB6oDXa/>
* B站：<https://www.bilibili.com/video/BV1K4421S7YA/>

之前我一直觉得CSS里的important是个鸡肋

但是今天遇到了一个场景

我觉得挺好哈

给大家看一下

我现在这个地图（Demo演示为一张地图图片）里边

有两个点是通过地址栏参数传进来的

大家看如果我只传一个start

大家看！End就不显示

然后呢再传一个End

它就显示

也就是说

这两个点是通过地址来参数控制的

而且呢

它们这个样式是直接写在行内的

大家看！display = block

然后呢比如说其中一个不传

它的display就是none了

然后遇到什么问题呢

就是这还有一个功能

就是可以切换这个大头针的功能

就是我可以控制它显示和不显示

在这种情况下

大家看！只显示一个start的情况下

隐藏没问题

但是一打开的时候

注意看这个End就跑这来了

其实原因很简单

就是我们在做切换显示的时候呢

应该做一个判断

看地址栏有没有End参数对吧

但这样的话逻辑就稍微有点复杂了

那这时候important就能用上了

大家看我们定一个样式叫强制隐藏

然后display: none !important

然后呢我们在切换的时候呢

我还写了另一个方法

在这是 ...

大家看我们在切换的时候

只是控制它有没有这样式就好了

我们再试一下

把这个打开

看一下这两个样式

好把它关掉

大家看它还是一个block 一个none

但是呢多了一个force hide

他俩都不显示了

我再把它打开也没有问题

那个End也没有显示

这样的话呢

我们就简化了代码逻辑

只要有 .force-hide

就说明要强制隐藏起来