logo标签列表

CSS覆盖规则

htmlcsscss-selectors
3

我有一个小的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，但是第一个规则覆盖了第二个规则。如何解决这个问题？

1
如果绝对必要（对于一个看起来非常必要的“hide”类），您可以在样式规则中添加！important：display: none !important;。但是请注意，如果您依赖它们，它们会使事情变得非常复杂。 - somethinghere
2
不要使用 !important！ - Christoph
1
@Christoph 为什么每个人都固执地说呢？除非情况确实需要，否则不要使用 !important。通过增加特定性，您会失去一个旨在隐藏具有该类的所有内容的类的力量，无论其他任何事情如何。我知道如果可以的话应该避免使用 !important，但在这里它是完全合理的。它是我们工具箱中的另一种工具，至少有一些用途。 - somethinghere
1
这样做可能会导致代码后面出现复杂情况。最好的做法是在同一级别上格式化和编写您的CSS（这是更好的实践）。 - lharby
2
@somethinghere 因为我认为告诉 CSS 新手他们应该在这种情况下使用 !important 不是一个好主意。 - Christoph
显示剩余3条评论
5个回答
5
增加你的强度，使其比之前的规则更强:
.box-div .hide {
  display: none;
}

或者

div.hide{
   display: none;
}
1
我猜这样做确实违背了拥有一个通用的“hide”类的目的。 - somethinghere
OP可以给它取不同的名字，但在这种情况/问题下，那是唯一正确的答案，增加了特定性。 - Mark
2
我不喜欢!important。!important是所有加班的根源。 - AVAVT
2
@ Mark，你似乎坚持从意识形态的角度来看待问题，这恰好是为什么!important的存在。它的作用并不是制造麻烦，但对于像.hide这样的通用类别，它非常有用，我可能希望在标题、图像、div和嵌套超深的元素等上使用它。它之所以在这里是正确的，是因为增加特定性是愚蠢的，如果你想要在你的网站上隐藏任何东西，你将不得不继续添加每个元素并给它一个.hide类，这只是在加班解决已经有解决方案的问题。 - somethinghere
谢谢大家，我明白了。 - Dragos
3
有多种方法可以完成相同的任务。 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;
}
2
.hide.hide  {
  display: none;
}

您可以通过重复来增强您的特异性 :)
1

这很简单

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

尝试一下。
1

个人而言，使用单一的.hidden类可以很好地隐藏页面上的元素，无论它嵌套在哪里。我希望这个类在任何地方都能工作。

因此，我认为最好创建一个display: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>
我同意，但这并没有解决特异性问题。例如，如果我有一个 div#myId { display: block; }，但使用你的 .hide 类，hide 类将被更高特异性的 id 定义所压制。这实际上就是 OP 的问题。 - somethinghere
@Iharby，这是真的，但那只是一个“例子”，你也可以决定要使用inline-block，而且你确实需要声明。然后你的规则就会失效，这正是OP所遇到的问题——他的.hide类的display属性被更具体的定义覆盖了。 - somethinghere
公平地说，我正在尝试以尽可能少的代码和语义化的方式考虑如何实现这一点。 - lharby
1
我现在为那个提问者感到遗憾，因为有这么多不同的观点 :/ - lharby
让我总结一下：如果它是一个实用类（例如，当您添加hide类时，它仅用于隐藏_任何_元素，而不是其他任何东西），那么使用!important是可以的 - 这就是它的作用。如果它是针对样式和特定目的的，则不要使用!important。但是，这确实是一个混乱的问题 :) - somethinghere
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接