0

css2 を使用して、Web サイトに IE7 の修正を実装しています。

そのため、margin-top:30pxタイトルを付けなければなりませんが、正しいセレクターが見つかりません。margin-bottom:-30px<h2>

<div class="ui-content">
    <h2>Text</h2>
    <ul class="ui-listview">
        List Items
    </ul>
</div>

実際には、 a のH2後に aがあるたびにUL、これら 2 つのプロパティを配置する必要があるため、h2 と ul を使用してセレクターを実行したかったのですが、どちらが正しいかわかりません...

助けてくれてありがとう

4

3 に答える 3

0

H2 の後に UL が続くたびに、これら 2 つのプロパティを配置する必要があるため、h2 と ul を使用してセレクターを実行したいと考えました。

@Spudley と @Coop で述べられているように、別の要素が後に続く要素を選択することはできません (li、td、または th の一連のまれなケースを除きます:nth-last-child()が、それはよりトリックです)。
純粋な CSS でできる最も近いことは、h2 の後に (別の) 要素が続くかどうか、つまり、pseudoだけではないかどうかをテストすることです。:only-child

MDNから:

:only-childCSS 疑似クラスは、親の唯一の子である要素を表します。:first-child:last-childこれはまたはと同じですが、:nth-child(1):nth-last-child(1)特異性は低くなります。

サポートは IE9+ であるため、IE7 および IE8 でもこの要素のスタイルを設定する場合 (または、p や h3 ではなく ul が続く正確なケースでは...)、JavaScript が必要になるか、サーバー側のクラスを追加する必要があります。このクラスのスタイルを設定します。

.ui-content > h2:not(:only-child) {
    margin-top: 30px;
    margin-bottom: -30px;
}

編集:
H2 が:first-childその親の最後から 2 番目の子であるかどうかをテストすることもできます。そのため、その後に何らかの要素が続く場合はスタイルが設定されますが、この 2 番目の要素に他の兄弟 (3 番目、4 番目など) がある場合はスタイルが設定されません。 )

.ui-content > h2:first-child:nth-last-of-type(2) {
    margin-top: 30px;
    margin-bottom: -30px;
}

最も単純なコードは ;)

<div class="ui-content">
    <h2 class="followed-by-list">Text</h2>
    <ul class="ui-listview">
        List Items
    </ul>
</div>

.followed-by-list {
    margin-top: 30px;
    margin-bottom: -30px;
}

プロジェクトの完全なオーバーホールを意味するその他のトリック (たとえば、次のプロジェクト;)): 単一のmargin-bottom要素をコンテンツ要素に設定しないでください (h2、ul、p などを意味します。div および以下の「ブロック」では問題ありません)。常に margin-top を次のように設定します。

  • 要素 (一般的な場合) 例: p
  • 必要に応じて、次のような要素がelt1 + p特定のマージントップ、elt2 + p別のマージンなどを持ちます
于 2013-08-14T16:52:00.423 に答える
0

h2s の後に uls を選択することはできませんが、その逆は可能です。例えば

h2 + ul { /*your css to style the ul*/ }

それで、ULに修正/負のマージンなどを入れることができますか?

于 2013-08-14T15:11:06.330 に答える
0

これは、ie-7 のみのセレクターです。

IE 7 only
 *:first-child+html h2 {}

とにかく、このブラウザーを使用する人はほとんどいないため、お勧めしません。また、このブラウザー用に特別にプログラムする必要もありません。

于 2013-08-14T15:11:59.217 に答える