1

我需要对一些我无法直接控制的 HTML 标记进行样式设置，并尝试仅显示 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 的解决方案（如果可能的话）。

4

3 回答 3

3

注意- 此答案适用于预计不会影响搜索引擎优化 (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”），但负边距也是如此。

还要注意，您必须小心特殊性：

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

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

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

于 2012-07-02T09:53:25.220 回答
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一个宽度。

于 2012-07-02T10:07:07.990 回答
1

给你：http: //jsfiddle.net/kqUUN/12/

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

于 2012-07-02T10:04:34.260 回答