html - 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，但第一条规则覆盖了第二条。如何解决？

Answer 1

增加你的力量，让它比之前的规则更强:

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

或

div.hide{
   display: none;
}