尝试使用CSS隐藏div

Question

好的，我知道一个简单的问题-但是其中哪一个是正确的？

我正试图隐藏此div：

<div class="notice important-message">

.notice .important-message {
    display: none
}

或-类通过以下方式连接在一起：

.notice.important-message {
    display: none
}

Answer 1

。通知.important-message

在这种情况下，将选择元素.important-message：

<div class=".notice>
    <div class=".important-message"></div>
</div>

.notice.important-message

选择此项：

<div class="notice important-message"></div>

所以第二个是正确的。 检查this以获取更多参考。

Answer 2

第二个是正确的。您也可以做div.class1.class2 {}

Answer 3

尝试一下

<div class="notice important-message">

.notice .important-message {
    display: none;
    visibility: hidden;
    opacity: 0;
}

Answer 4

在这种情况下， 2个类位于同一节点上

<div class="notice important-message">

因此，您可以使用此代码（无空格）

.notice.important-message {
    display: none
}

如果这些 2个类位于父子节点上 就是

<div class="notice">
    <div class="important-message">
    </div>
</div>

然后您可以使用（带空格）

.notice .important-message {
    display: none
}