CSS：仅显示DIV的相关子集

我需要设计一些我无法直接控制的HTML标记的样式，并试图只显示div的相关子集，同时隐藏其他所有内容

div to style

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

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

第二次尝试

结果：不相关的文本是不可见的，但它仍然占用了与可见文本相同的空间（这符合CSS规范，但不是期望的结果）：

问题

我能怎么办

---

我正在寻找一个只使用CSS的解决方案（如果可能）。

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

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

感觉“粗糙”（不像“-sacky”），但负利润率也是如此

请注意，您必须：

---

.ham

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

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

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

感觉“粗糙”（不像“-sacky”），但负利润率也是如此

请注意，您必须：

.ham

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

给你：

唯一的问题是，您必须手动将“垃圾邮件”和“火腿”混合的高度设置为您想要的任何高度。希望这有帮助。

给你：

---

唯一的问题是，您必须手动将“垃圾邮件”和“火腿”混合的高度设置为您想要的任何高度。希望这能有所帮助。

既然您提到了图像等，也许这样的方法适合您：

CSS:

HTML（与您的相同）：

不相关的、冗长的文本（->应隐藏）
重要内容（->应可见）

---

---

您可以设置

#spam_和#ham_mix{width:0px；}

，但是您很可能希望给

#spam_和#ham#mix{code>一个宽度。
既然您提到了图像和类似的方法，也许这样的方法对您有用：


CSS:

HTML（与您的相同）：


不相关的、冗长的文本（->应隐藏）
重要内容（->应可见）


你可以设置
#spam_和#ham_mix{width:0px；}
但是你很可能想给
#spam_和#ham#mix#ham
一个宽度。
我不知道如果不将另一个（不可打印的）文本包装在可以特别隐藏的标记中，或者将另一个文本移出标记，你就可以做任何事情。@Jared（但我开始怀疑的是）——如果这是我的答案，我会接受。但我仍然希望找到一个解决方案……好吧，也许我说得太早了：我没有检查所有浏览器，但在FF13中都能正常工作。而且，通常很少有理由链接
\id\id
这样的选择器。我不知道如果不包装其他浏览器，你能做任何事情（不可打印）标记中的文本，可以明确隐藏，也可以将其他文本移出。@Jared:这不是我希望看到的（而是我开始怀疑的）--如果这是答案，我会接受。但我仍然希望找到一个解决方案……好吧，也许我说得太早了：我没有检查所有浏览器，但在FF13中都可以。而且，通常很少有理由链接
#id#id
这样的选择器。这对我来说也感觉不太好，但它在IE9、OSX和Win64上的Chrome20以及FF中都可以工作。有什么想法吗当不相关的部分不仅是文本，而且是img或提交按钮等时，您会这样做吗？将元素设置为
显示：无
。其他元素如果不起作用，您可以将其
高度
/
宽度
设置为
0
？您试图完成的任务本质上被标记的结构和您所演示的内容所破坏ted是文本。如果要打印，则必须在父级中应用的任何内容在子级中反转，这可能会有问题。如果可以，请在父级中要隐藏的元素中包含
noprint
类，并将其设置为
display:none
@FelixAlcala-不“好”，但您可以对子元素执行这些操作，您只需要完成（请参阅重置脚本以获取元素列表）：我认为
noprint
类会更好。@Jared-我无法控制html（它来自第三方）--我必须解决这个问题。我喜欢你更新的脚本，并会尝试一下。@FelixAlcala-你可以对该列表进行分类，这样它就不会绑定到特定的
id
'd元素，在这种情况下，你真的需要特别小心，因为它很容易被重写。我觉得它也有问题，但它在IE9、Chrome20 o中工作n OSX、Win64和FF。当不相关的部分不仅是文本，而且是img或submit按钮等时，您知道该怎么做吗
#spam_and_ham_mix { display:none; }  /* CSS-Weight 100 */
#spam_and_ham_mix #ham { display:block; }  /* CSS-Weight 200 */

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

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

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

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

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