Question

感谢您的时间！代码非常简单。我想它应该显示＆＃34;这是CPU＆＃34;。但它没有。我哪里错了？

对于无法打开小提琴的人，请参阅以下代码：

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更改为类，它可以工作？

例如：Fiddle

Answer 1

这里要注意的主要是 CSS优先级

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

您需要使用您的ID和类的组合来创建比id更优先的

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

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

您还可以使用部分选择器来减少代码..

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

注意：除非您没有其他选项，否则请勿使用!important。在大多数情况下，可以在不使用!important的情况下完成工作。

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>

override css div display：none;

2 个答案: