对于相同的效果，哪个CSS3规则是更好的选择？

我有一个CSS3规则，我想隐藏给定元素中的所有内容，除了任何标题的，直到用户将鼠标悬停在它上面哪种方式更好？请记住，在这种情况下，我并不担心与CSS2.1的向后兼容性

想法1

---

Pro:在一个选择器中完成所有操作

缺点：看起来不稳定，我觉得有点模棱两可

想法2

---

Pro:经典CSS，更容易理解

---

缺点：覆盖以前设置的样式；看起来不像

display:initial

是有效的CSS，尽管它可以工作。

最好的方法是将非标题内容封装在某种形式的容器中。可能是div或HTML5语义容器，具体取决于您的情况。对这些内容容器应用一个类，然后使用一个简短的查询来隐藏此内容。由于隐藏容器将自动隐藏其内容，因此您有一个简短、简单且最重要的是可以理解的解决方案，只需要很少的额外标记

---

我应该首先提到，这样做确实偏离了严格使用CSS的最初愿望。在这里，您使用JavaScript处理事件，使用CSS管理信息的显示和隐藏。我发现这比让标题的CSS决定内容的风格更简洁，但这只是我自己

无论如何，一个非常简单的实现如下。如果你实现了这一点，你会想要重构以使它更健壮（使用第二个孩子不是很好的重构证明），但是你得到了这个想法

<div id="wrapper">
    <h1>Content</h1>
    <div style="display: none">
        This is some hidden content
    </div>
</div>

document.getElementById("wrapper").onmouseenter = function () {
    this.children[1].style.display = "block";
};

document.getElementById("wrapper").onmouseleave = function () {
    this.children[1].style.display = "none";
};

内容
这是一些隐藏的内容
document.getElementById（“包装器”）.onMouseCenter=function（）{
this.children[1].style.display=“block”；
};
document.getElementById（“包装器”）.onmouseleave=function（）{
this.children[1].style.display=“无”；
};

我认为你所拥有的最好的组合。通过执行

：not（：hover）

而重置所有标题元素（通常是

display:block

），可以消除

display:initial

更新：需要通过将

：not（：hover）

添加到all来提高选择器的特异性。（注意：h2.1标记仍然是隐藏的，因为它位于

div

[这是BoltClock在讨论中指出的]）

---

display:initial

是有效的CSS；它只是还没有得到广泛的支持（只有AFAIK的WebKit支持它）。如果您试图将一个元素重置为其默认的

显示

值，那么这不是

初始

所做的；该关键字总是将其重置为

内联

，而不管它是什么元素，因为这是规范定义的初始值。为什么不能让类“折叠”呢这使得事情显示为：无？恐怕您对您的需求过于具体了。

.collapsed{display:none；}

@PatrickJamesMcDougle因为我想在不同的DOM元素上以不同的方式使用

折叠

，所以我将删除我的答案-这不是必需的，我已经在上面对

initial

有了评论：）

SECTION FIGURE.collapsed *{
    display:none;
}
SECTION FIGURE.collapsed:hover *{
    display:initial;
}


SECTION FIGURE.collapsed H1,
SECTION FIGURE.collapsed H2,
SECTION FIGURE.collapsed H3,
SECTION FIGURE.collapsed H4,
SECTION FIGURE.collapsed H5,
SECTION FIGURE.collapsed H6{
    display:block;
}

<div id="wrapper">
    <h1>Content</h1>
    <div style="display: none">
        This is some hidden content
    </div>
</div>

document.getElementById("wrapper").onmouseenter = function () {
    this.children[1].style.display = "block";
};

document.getElementById("wrapper").onmouseleave = function () {
    this.children[1].style.display = "none";
};

SECTION FIGURE.collapsed:not(:hover) * {
    display:none;
} 

SECTION FIGURE.collapsed:not(:hover) H1,
SECTION FIGURE.collapsed:not(:hover) H2,
SECTION FIGURE.collapsed:not(:hover) H3,
SECTION FIGURE.collapsed:not(:hover) H4,
SECTION FIGURE.collapsed:not(:hover) H5,
SECTION FIGURE.collapsed:not(:hover) H6{
    display:block;
}