CSS覆盖规则

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;
}