Question

我对风格有以下标记。我遇到的问题是我只想展示它的一部分。 .standfirst中的文本需要隐藏，但.byline中的文本需要显示。

CSS甚至可以实现吗？

<p class="standfirst">
<span class="article-info"><em class="byline">Rory Callinan</em></span>
A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.
</p>

Answer 1

你不能用你在这里展示的嵌套来做到这一点。唯一的方法是以某种方式单独包装您想要隐藏的内容，例如

<p class="standfirst">
<span class="article-info"><em class="byline">Rory Callinan</em></span>
<span class='content'>A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.</span>
</p>

Answer 2

您需要用以下内容包装文本：

<p class="standfirst">
    <span class="article-info"><em class="byline">Rory Callinan</em></span>
    <span class="article-text">A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.</span>
</p>

然后很容易：

.article-text { display: none; }

Answer 3

最好的方法是重构HTML，以便轻松选择想要显示的部分。

然而，使用该标记是可能的（尽管很难看）。

.standfirst {
   font-size: 0;   
}

.standfirst .byline {
   font-size: 12px;   
}

jsFiddle

Answer 4

如果隐藏父元素，则无法显示内部元素。 Bets选项是将您的标记更改为可以使用的标记，可能为文本的其余部分添加另一个范围并隐藏它。

Answer 5

这样的东西对我来说适用于Chrome和IE6。显然 - 这不是最好的方法，但如果你需要让它工作，这可能是一个选择。请注意，以这种方式隐藏的元素仍占用页面空间。

<html>
    <head>
        <style type="text/css">
            .standfirst { visibility: hidden; }
            .standfirst .article-info { visibility: visible; }
        </style>
    </head>
    <body>
        <p class="standfirst">
            <span class="article-info"><em class="byline">Rory Callinan</em></span>
            A FORMER nightwatchman at the Port Macquarie company accused of dumping contaminated waste.
        </p>
    </body>
</html>

使用css隐藏部分内容

5 个答案: