CSSのマッチング問題を解決する

問題の説明

ご存知のとおり、CSS を記述する場合、HTML のクラスの定義または ID の定義に従って、対応する CSS コードが記述されます。クラスごとに異なるスタイルを定義します。もちろん、コードを少なくするために、CSS で一致するものを参照することになります。マッチングには、ファジーマッチングとグローバルマッチングの 2 種類があります。マッチング方法はいくつかあります。もちろん、HTML で異なるクラス名を記述したり、同じクラス名を記述して、すべてのスタイルの一致を実現することもできます。しかし、クラス名を同じように記述できない場合があり、その結果、コードが冗長になり、コードの複雑さが増すことになります。コードの冗長性を減らすために、クラスマッチングが登場します。

解決

最初の方法は、マッチングに div を使用することですが、このマッチングではすべての div に同じスタイルが使用されます。

<div>
<div id='div1'/>
<div id='div2'/>    
</div>
// 内部のすべてのdivのスタイルを設定する場合は、>識別子を使用します。parent>div{
//スタイル//
}

2 番目の方法は、class によって定義されたクラスを一致させることです。この種類のマッチングは比較的正確であり、マッチング方法も 2 つあります。最初のマッチング方法は、矢印記号を使用してマッチングすることです。例: [class^="icon-"]

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル>
[クラス^="アイコン-"]{
幅: 100ピクセル;
高さ: 50px;
背景色: 赤;
}
</スタイル>
</head>
<本文>
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
<div>5555</div>
</本文>
</html>

図2.1 効果

ただし、この一致方法では、クラス名の前に icon- を付ける必要があります。クラス名の前に他の名前がある場合、対応する効果は得られません。したがって、別のマッチング方法を使用することもできます。つまり、クラス名のグローバルマッチングです。例えば：

[class*=" icon-"] 、アイコンの前にスペースがあることに注意してください。また、対応するクラス名のグローバルマッチングが実現できるように、上記の矢印をアスタリスクに置き換える必要があります。

<!DOCTYPE html>

<html>

<ヘッド>

<メタ文字セット="UTF-8">

<title>タイトル</title>

<スタイル>

[class*="icon-"]{

幅: 100ピクセル;

高さ: 50px;

背景色: 赤;

}

</スタイル>

</head>

<本文>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success icon-t">555</div>

</本文>

</html>

図2.2 効果

この方法では、クラス名に Icon が含まれていれば、スタイルを一致させることができます。ただし、この種類のマッチングでは、icon で始まるクラス名に対しては対応する効果が得られないため、2 つを一緒に使用できます。このようにして、マッチング効果を十分に達成することができます。

図2.3 効果

上記の効果を実現するには 2 つの方法があります。 1 つ目は 2 つを一緒に使用すること、2 つ目はアイコンの前のスペースを空けることです。

<!DOCTYPE html>

<html>

<ヘッド>

<メタ文字セット="UTF-8">

<title>タイトル</title>

<スタイル>

[class^="icon-"],[class*="icon-"]{

幅: 100ピクセル;

高さ: 50px;

背景色: 赤;

}

</スタイル>

</head>

<本文>

<div>1111</div>

<div>2222</div>

<div>3333</div>

<div>4444</div>

<div class="text-success icon-test">555</div>

</本文>

</html>

これにより、コードの冗長性が削減されます。

コードを書く過程では、プログラムがより良く実行されるようにコードの冗長性を減らすことを学ぶ必要があります。

CSS のマッチング問題についてはこれで終わりです。CSS マッチングに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Linux スワップパーティション (詳細説明)

>>: FlashFXP FTP クライアントソフトウェア登録クラッキング方法