1

一部の記事のテキストでは、画像がp.imgタグで囲まれており、個々に上部と下部に境界線とパディングが追加されています。

p.img {
    border-top: 1px dotted #414042;
    border-bottom: 1px dotted #414042;
    padding-top: 20px;
    padding-bottom: 20px;
}

ただし、一連の画像が連続して表示される場合は、次のようになります。

<p class="img"><img ...></p>
<p class="img"><img ...></p>
<p class="img"><img ...></p>
<p class="img"><img ...></p>

p.imgpadding-top と border-top をグループの最初padding-bottomとborder-bottom最後に適用したいだけですp.img。「p.img」では、すべての境界線とパディングを削除する必要があります。

p.img + p.img隣接するセレクターを試してみp.imgましたが、グループの最初と最後に影響を与えることはできません。

JS に頼る前に、CSS のみを使用してこれを達成するのを手伝ってくれる人がいれば、それは素晴らしいことです。

編集 最初の子セレクターと最後の子セレクターを使用することを提案する人もいますが、隣接する p.img のグループの一部ではない p.img には影響を与えたくありません。つまり、これは機能しません（sassで）

p.img + p.img {
        border-top: 0;
        border-bottom: 0;
        padding-top: 0;

        &:first-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        &:last-child {
            border-top: 0;
            padding-top: 0;
        }

    }

私の記事は次のようになります。

article 
    p
    p
    p.img
    p
    p.img
    p.img
    p.img
    p

スタイルを設定したいのは、3 つのグループの p.img だけです。最初の個人的なものではありません。

4

5 に答える 5

2

css3は使えますか？(つまり、古いバージョンの IE をサポートする必要がありますか?)

:first-child可能であれば、および:last-childセレクターを使用できます。

これらはまさにあなたが望むことをしますが、サポートが不足しています. IE8以下で。

于 2012-11-28T12:29:10.470 に答える
1 
p.img {
    border-top: 1px dotted #414042;
    border-bottom: 1px dotted #414042;
    padding-top: 20px;
    padding-bottom: 20px;
}

p.img:first-child {
    padding-top: 40px;
}

p.img:last-child {
    padding-bottom: 40px;
}
于 2012-11-28T12:35:03.370 に答える
0

セレクターを試し:first-of-typeてみることをお勧めします。:last-of-type

Andyが言うように、ブラウザのサポートがあなたのこだわりです。

http://caniuse.com/#feat=css-sel3

于 2012-11-28T12:32:27.807 に答える
0

記事を更新し、記事の構造を見てみると、画像がどのようにグループ化されているかが常にわかりますか? 手動の場合は、少し余分な css を追加して、次のような新しいクラスを作成できませんでした:

p.img {

}

p.img-first { ボーダートップ: {

p.img-last {border-bottom:}

したがって、記事は次のようになります。

記事 p p p.img p p.img-first p.img p.img-last p

ただし、手動ではなく、画像がどのように表示されるかわからない場合は、JS が唯一のオプションです。

于 2012-11-28T12:46:54.263 に答える