Question

我有一点CSS问题。

在我的HTML中我有这样的东西：

<div class='box-div'>
  <div>Entry 1</div>
  <div class='hide'>Entry 2</div>
</div>

在我的CSS中：

.box-div div {
  display: inline-block;
}

.hide {
  display: none;
}

我希望隐藏第二个嵌套div，但第一个规则会覆盖第二个嵌套div。怎么解决这个问题？

Answer 1

增加你的力量，使其比以前的规则更强：

.box-div .hide {
  display: none;
}

或

div.hide{
   display: none;
}

Answer 2

有不同的方法可以做到这一点。

1

.box-div {
  display: inline-block;
}

.hide {
  display: none;
}

<强> 2

.box-div div{
  display: inline-block;
}

div.hide {
  display: none;
}

第3

.box-div div{ display: inline-block; } div.hide { display: none; }

<强> 4

.box-div div { display: inline-block; } .hide { display: none !important; }

Answer 3

.hide.hide  {
  display: none;
}

你可以通过重复来加强你的特异性：）

Answer 4

这很容易

HTML：

<div class='box-div'>
  <div>Entry 1</div>
   <div class='hide'>Entry 2</div>
</div>

CSS：

.box-div div {
  display: inline-block;
}

.box-div > div.hide {
  display: none;
}

试试这个。

Answer 5

就个人而言，使用单个类.hidden将是一个很好的解决方案，可以隐藏页面上的元素，无论它是如何嵌套的。我希望这堂课能在任何地方工作。

所以我认为为dispaly:inline-block创建一个可以重用的类可能会更好。

您可以指定.box-div中的第一个div始终具有inline-block作为属性，但这是非常严格的。

我的解决方案：

.ib {
  display: inline-block;
}

.hide {
  display: none;
}

<div class='box-div'>
  <div class="ib">Entry 1</div>
  <div class='hide'>Entry 2</div>
</div>

CSS覆盖规则

5 个答案: