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>

望ましい結果

「重要なもの」だけを表示し、それ以外はすべて非表示にしたいと考えています。

1 回目の試行 

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

結果: div は完全に非表示のままで、何も表示されません。

2回目の試行 

#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/

「ハッキー」に感じますが (「-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 に答える