覆盖CSS div的display: none;属性

Question

感谢您的时间！这些代码非常简单。我认为它应该显示“这是CPU”。但它没有。我错在哪里了？

Fiddle

对于无法打开Fiddle的人，这里是代码：

HTML：

<div id="tab1" class="active" ><p>This is CPU</p></div>
<div id="tab2"><p>This is MEM</p></div>
<div id="tab3"><p>This is Network IO Receive</p></div>
<div id="tab4"><p>This is Network IO Send</p></div>

CSS：

#tab1, #tab2, #tab3, #tab4 {
  display: none;
}

.active {
  display: block;
}

通过添加!important可以使其起作用。但是，如果我将所有的id更改为class，为什么它也可以起作用呢？

例如：Fiddle

- mCY

---

https://jsfiddle.net/LeoLion/8ccbcyxc/2/ - Leo the lion

使用 !important 将强制设置 display: block。已更新的样例 - Pugazh

@Pugazh，但是如果我把所有的ID都改成类，它为什么能工作呢？ - mCY

@user1476512，如果我的回答有所帮助，请告诉我。 - Rajshekar Reddy

@Quentin，很抱歉，但有时根据条件我们不得不使用!important，而且我们可以将其单独使用，这样就不会影响其他CSS规则了……这样可以吗？ - Leo the lion

Answer 1

需要注意的主要是CSS优先级

在这种情况下，使用ID提供的规则优先于类

您需要使用id和class的组合来创建比仅使用id更高的优先级

#tab1, #tab2, #tab3, #tab4 {
  display: none;
}

#tab1.active , #tab2.active , #tab3.active , #tab4.active {
  display: block;
}

您也可以使用部分选择器来简化代码。

[id^=tab].active{
 display: block;
}

注意：除非没有其他选择，否则不要使用!important。在大多数情况下，可以完全不使用!important来完成工作。

- Rajshekar Reddy

---

@user1476512 很高兴我能帮到你。 - Rajshekar Reddy

Answer 2

在此处使用 important。

.active {
    display: block !important;
}

CSS的id选择器#具有很高的优先级，因此为了使其生效，您需要使用!important。但是，我更喜欢使用以下方式：

.tab {
  display: none;
}

.tab.active {
  display: block;
}

<div class="tab active" id="tab1"><p>This is CPU</p></div>
<div class="tab" id="tab2"><p>This is MEM</p></div>
<div class="tab" id="tab3"><p>This is Network IO Receive</p></div>
<div class="tab" id="tab4"><p>This is Network IO Send</p></div>

- Mohammad Usman