Question

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

想法1

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

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

Con：看起来不稳定，我觉得它有点含糊不清

创意2

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

专业版：经典CSS，更易于理解

缺点：覆盖以前设置的样式; display:initial;似乎不是有效的CSS，尽管它有效。

Answer 1

执行此操作的最佳方法是将非标头内容封装在某种形式的容器中。也许是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";
};

Answer 2

我认为你所拥有的东西最好。您可以通过执行display: initial来消除:not(:hover)，但重置所有标题元素（无论如何通常都是display: block。

更新：需要通过向所有人添加:not(:hover)来提高选择器的特异性。 See fiddle.（注意：h2.1标记仍然是隐藏的，因为它是里面 a div [这是BoltClock在他的讨论中提到的]。）

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

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

想法1

创意2

2 个答案: