Question

我需要设置一些HTML-Markup的风格我没有直接控制，我试图只显示一个div的相关子集，同时隐藏其他所有内容。

风格的div

<div id="spam_and_ham_mix">
    Irrelevant, looooooooong text (--> should be hidden)
    <div id="ham">Important stuff (--> should be visible)</div>
</div>

所需的结果

我希望只显示“重要的东西”，同时隐藏其他所有内容。

第一次尝试

#spam_and_ham_mix { display:none; }  /* CSS-Weight 100 */
#spam_and_ham_mix #ham { display:block; }  /* CSS-Weight 200 */

结果：div完全隐藏，完全没有显示任何内容。

第二次尝试

#spam_and_ham_mix { visibility:hidden; }  /* CSS-Weight 100 */
#spam_and_ham_mix #ham { visibility:visible; }  /* CSS-Weight 200 */

结果：不相关的文本是不可见的，但它仍然需要相同的空间，如果它是可见的（这符合CSS规范，但不符合所需的结果）：

问题

我该怎么办？

我正在寻找一种仅限CSS的解决方案（如果可能的话）。

Answer 1

注意 - 此答案适用于预计不会影响搜索引擎优化（SEO）的情况。换句话说，打印样式表和网站/页面，其中内容不打算被搜索引擎抓取。在这些情况下执行以下操作可能会导致搜索引擎确定网站正在操纵内容，从而可能对搜索位置产生负面影响或导致某种禁令。我没有任何证据证明这种情况，但如果这是你的情况，请小心。

这似乎适用于我测试过的所有浏览器（FF13，Chrome，Opera 12，IE7-9）：

#spam_and_ham_mix {
    font-size: 0; 
}
#ham {
    font-size: 15px; 
}

http://jsfiddle.net/userdude/kqUUN/

感觉“hacky”（而不是“-sacky”），但负边距也是如此。

请注意，您必须是careful with specificity：

#spam_and_ham_mix,
#spam_and_ham_mix .ham {
    font-size: 0;
}
.ham {
    font-size: 15px;
}

http://jsfiddle.net/userdude/kqUUN/1/

.ham因为单个选择器将被更“特定”的选择器覆盖，即其他选择器。

Answer 2

既然您提到了图像等，也许这样的方法对您有用：

http://jsfiddle.net/lollero/nYFWw/

CSS：

#spam_and_ham_mix { 
    visibility: hidden;
    height: 0px;
    position: relative;
    overflow: visible;
}
#spam_and_ham_mix #ham { 
    visibility: visible;
    position: absolute;
    top: 0px;
    left: 0px;
}

HTML（与您的相同）：

<div id="spam_and_ham_mix">
    Irrelevant, looooooooong text (--> should be hidden)
    <div id="ham">Important stuff (--> should be visible)</div>
</div>

您可以设置#spam_and_ham_mix { width: 0px; }但是您很可能想要#spam_and_ham_mix #ham宽度。

Answer 3

你走了： http://jsfiddle.net/kqUUN/12/

唯一的问题是，您必须手动将#spam_and_ham_mix的高度设置为您想要的任何值。希望这会有所帮助。

CSS：仅显示DIV的相关子集

3 个答案: