垂直マージンを実装する兄弟セレクターのコード例

複雑なデザイン要件を満たしながら、兄弟セレクターが CSS を読みやすい状態に保つ方法

これは、単純に始まり、徐々に複雑になっていく Web フロントエンド開発プロセスの例の 1 つです。記事内のすべての要素に垂直方向のマージンを適用します (垂直 margins)、複雑なマークダウンからコンパイルされたブログ投稿など。

ほとんどの場合、次のような多くの例外と相関関係に対処する必要があります: タイトルと 写真 は通常、上下により多くの空白スペースを必要としますが、2 つの写真が隣り合っている場合、画像間の空白は2 つの写真の変化は少なくなります。 h2 タグと h3 タグ間の直接距離は、2 つの h2 タグ間の距離よりも小さくなります。

オリジナルの作成者が数年前に初めてフロントエンドを始めたとき、これらすべての例外と依存関係により、常に複雑なコード、視覚的な矛盾、予期しない動作が発生しました。 margin-topが機能しない理由を何度もグーグルで調べました。

ステップ 1

簡単な HTML は次のとおりです:

<article class="article">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <img src="…" alt="…">
  <p>Lorem ipsum dolor sit amet</p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>

通常、2 つの段落を取り出して、目的の効果を達成した後、この値をすべての要素の基本マージンとして使用します。

.article > * + * { 
    margin-top: 1.5rem;
}

上記のCSSコードは、隣接する兄弟要素を持つ.article内のすべての子要素にmargin-topを追加します。直接要素に margin-topattribute を追加するだけで、不要な影響を回避できます。たとえば、上記の HTML では、li の代わりに margin-top を使用して ul が追加されます。

2 番目のステップ

このステップでは、次のようなより具体的な CSS ルールが追加されます。

.article > img + * { 
    margin-top: 3rem;
}

img の後の要素は特定の margin-top を受け取り、その効果は margin を直接適用するのと似ています。 img -下。 しかし、隣接する兄弟セレクターと margin-top を使用すると、次の 2 つの利点があります:

1. 最後の子から margin-bottom を削除する必要がない

2. そして、マージンの崩壊を避ける

ステップ 3

この中で。ステップでは、特定の要素にルールを追加します。例:

.article > * + h2 { 
    margin-top: 4rem;
}
.article > * + img { 
    margin-top: 3rem;
}

隣接する兄弟を持つ h2 と img は、特定の margin-top を受け取ります。

ステップ4

この最後のステップでは、特別な相関関係を持つスタイルを扱います

.article > img + img { 
    margin-top: 1rem; 
}

隣接する画像間の距離を変更します

必要に応じて、次のような正確な

CSSセレクターを追加することもできます:

.article > img + img + img + h2 { 
    margin-top: 5rem;
}

h2 が 3 つの連続した画像に配置されている場合、特定のマージントップが与えられます。 幸いなことに、これは単なる特殊なケースですが、隣接する兄弟セレクターによってこの複雑な依存関係の問題を解決できることを知っておくと便利です。

高度な使用法

可読性を向上させるには、(SCSS) ネストを使用し、各ルールを 1 行で記述します。 後のビルド タスクで CSSO が処理するため、同じ値を持つセレクターを

グループ

にする必要はありません。

.article {
    > * + * { margin-top: 1.5rem }
    > h2 + * { margin-top: 1rem }
    > img + * { margin-top: 3rem }
    > * + h2 { margin-top: 4rem }
    > * + h3 { margin-top: 3.5rem }
    > * + img { margin-top: 3rem }
    > img + img { margin-top: 1rem }
    > h2 + h3 { margin-top: 4.5rem }
}

このテクニックは、ベースライン グリッドと同様に、SASS または CSS でも機能します。 すべてのマージンが指定されたマージン

変数

を使用して計算される場合、変数を変更するだけで全体のマージンを増減できます。 結論

ウェブサイトを開発するとき、通常、カテゴリのタイトル、

はじめに

テキスト、またはネストされたレイアウトなどの要素が含まれる非常に複雑な記事に遭遇することになります。隣接する兄弟セレクターと独自のマージントップを使用すると、CSS を理解しやすくしつつ、複雑なデザイン要件を解決できるため、後でルールを追加または調整することが容易になります。 【関連おすすめ】

1.

無料のCSSオンラインビデオチュートリアル

2.

CSSオンラインマニュアル

3.

php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上が垂直マージンを実装する兄弟セレクターのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。