1

私のページには一連の要素があり、その後にパンくずリストが続きます。通常、メッセージ要素は空で表示されませんが、そのうちの 1 つにコンテンツがあり、表示されているまれなケースでは、ブレッドクラム要素に余白を設けて、メッセージに対してフラッシュアップしないようにします。ただし、それ以外の場合は余白を追加したくありません。純粋にCSSでこれを行う方法はありますか? + 演算子はマージンを追加しますが、div が表示されていない場合は消えません。

<div class="message success"></div>
<div class="message error"></div>
<div class="breadcrumb>some content</div>

.message + .breadcrumb {
  margin-top: 10px; /*always there */
}
4

2 に答える 2

4

厳密に言えば、いいえ: CSS には、可視性に応じて要素を選択する手段がありません。ただし、前の要素は通常は空であり、コンテンツがある場合にのみマージンを追加したいと述べています。その場合、次のようになります。

/* styles the .breadcrumb with a margin-top */
.message + .breadcrumb {
    margin-top: 10px;
}
/* this rule is more specific, and so removes the margin-top if the .message
   element is truly empty (of everything, including text-nodes and white-space) */
.message:empty + .breadcrumb {
    margin-top: 0;
}

JS フィドルのデモ。

上記は隣接する兄弟に対してのみ機能します。要素のいずれかまたは両方のコンテンツの存在に基づいてmargin-topof のスタイルを設定したい場合は、少しトリッキーです。.breadcrumb.message

参考文献:

于 2013-11-04T01:25:58.297 に答える
0

ルールは「メッセージ エラー」要素に接続する必要があります。

.error {
    ...
    border-bottom: solid 1pt black;/*whatever you want*/ 
    ...
}

.error:empty {
    border-bottom: none;
}
于 2013-11-04T01:39:41.103 に答える