CSS エクスペリエンスを充実させる 5 つの便利な CSS セレクターを紹介します

Web デザイナーとして豊富な CSS 経験を持つ私たちは、あらゆる種類のコード構文、互換性、スニペットを覚えています。ウェブサイトのデザインを変更するのに本当に役立つ特定の CSS がいくつかあります。古い技術ルールや宣言を変更し、同じ効果を記述するのに使用するコードを減らすことが、私たちの目標の継続的な追求です。ここでは、XHTML ページをよりクリーンに保つのに役立つ 5 つの CSS セレクターを紹介します。
1. サブクラスを一致させる<br />メニューを設計するときに、「item」と「active」のすべての要素を選択するなど、複数のクラスを持つ要素を選択する必要がある場合があります。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
<スタイル>
/* ここにスタイル */
</スタイル>
</head>
<本文>
<ul class="リスト">
<li class="item">アイテム 1</li>
<li class="item active">アクティブアイテム 2</li>
<li class="active">項目 3</li>
</ul>
</本文>
</html>

一般的な解決策は、親要素を使用することです。次に例を示します。
.list .item {color: #ccc;} /* クラスが 'item' のすべての要素 */
.list .active {text-decoration: underline;} /* *クラスが「item」かつ「active」であるすべての要素**/
しかし、クラスが「active」の要素を除外し、「item」はそのままにしておく必要がある場合はどうすればよいでしょうか。サブセットマッチングセレクターコードは次のとおりです。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
<スタイル>
.item {color: #ccc;} /* 'item' クラスを持つすべての要素 */
.item.active {text-decoration: underline;} /* 'item' および 'active' クラスを持つすべての要素 */
</スタイル>
</head>
<本文>
<ul>
<li class="item">.item CSS セレクタが適用されました</li>
<li class="item active">.item および .item.active CSS セレクターが適用されました </li>
<li class="item active someOneMoreClass">.item および .item.active CSS セレクタも適用されました</li>
<li class="active">CSS セレクターは適用されていません</li>
</ul>
</本文>
</html>

ブラウザのサポート: Firefox、Chrome、Safari、IE 7 以上
2. 属性の選択<br />場合によっては、要素の特定の属性値を一致させる必要があることがあります。たとえば、最も一般的なケースはフォームの送信です。すべてのテキスト入力要素には 1 つのスタイルがあり、送信ボタンには別のスタイルがあります。この問題が発生する最も一般的な方法は、次の例のように、入力に異なるスタイルを定義することです。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
<スタイル>
ラベル {表示: ブロック; 色: #444;}
input.text {border: 1px solid #ccc; color: #333; padding: 3px;} //テキストボックスの別のクラスを定義します
input.submit {color: #333; border: 1px solid #333; background-color: #eee;} //送信ボタンのクラスを定義する
</スタイル>
</head>
<本文>
<フォーム>
<label for="login">ログイン</label>
<input class="text" type="text" name="ログイン" id="ログイン" 値="" />
<label for="login">パスワード</label>
<input class="text" type="password" name="password" id="password" value="" />

<input class="submit" type="submit" value="プッシュしてください" />
</フォーム>
</本文>
</html>

上に書いたことは確かに正しいのですが、追加のクラスを定義しない解決策があります。この問題では、属性セレクタを使用します。

コードをコピー

コードは次のとおりです。

/* "name"属性が設定された任意の要素に一致します（任意の値）*/
a[名前] { ... スタイル ..}
/* "type"属性値が"text"であるINPUT要素に一致します */
input[type="text"] { ... スタイル ..}
/* "myattribute" 属性値がスペースで区切られた値のリストであり、そのうちの 1 つが "value3" と正確に等しい任意の DIV 要素と一致します。
例: <div myattribute="value1 value2 value3 value4"> */
div[myattribute~="value3"] { ... スタイル ..}
/* "myattribute" 属性にハイフンで区切られた値を持つ任意の DIV 要素と一致します。
例: <div myattribute="value1-value2-value3-value4"> */
div[myattribute~="value2"] { ... スタイル ..}

これらのルールを使用すると、次のようなコードを書くことができます。

コードをコピー

コードは次のとおりです。

<スタイル>
ラベル {表示: ブロック; 色: #444;}
/* すべてのテキストとパスワードの入力 */
input[type="text"]、input[type="password"] {border: 1px solid #ccc; color: #333; padding: 3px;}
/* 送信ボタンのみ */
入力[type="submit"] {色: #333; 境界線: 1px 実線 #333; 背景色: #eee;}
</スタイル>
<フォーム>
<label for="login">ログイン</label>
<input type="text" name="ログイン" id="ログイン" value="" />
<label for="password">パスワード</label>
<input type="password" name="password" id="password" value="" />

<input type="submit" value="プッシュしてください" />
</フォーム>

ブラウザのサポート: Firefox、Chrome、Safari、IE 7 以上。
3. 隣接するセレクター<br />直面する可能性があるもう 1 つの問題は、同じレベルの要素にスタイルを適用することです (メニュー効果を確認するために項目の上にマウスポインターを置くなど)。

コードをコピー

コードは次のとおりです。

/* クラスが "active" である兄弟要素の前の任意の要素に一致します * */
a.アクティブ + a
/* 同じレベルの「アクティブ」クラスの後の任意の要素に一致します**/
a + a.アクティブ
/* ...そしていくつかの役に立つヒント... */
/* 最後の li 要素を除くすべての li 要素に一致します */
li + li { .. スタイル .. }
/* A:hoverの最初の要素に一致します*/
a:hover { /* 最初のスタイル: ホバー要素 */ }
/* 最初のホバー要素以外のスタイル
*/
a + a:hover { .. スタイル .. }

たとえば、メニューのスタイル設定などに使用できます。
隣接セレクターを使用するより簡単な方法を次に示します。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<ヘッド>
<スタイル>
.メニュー a {
/*メニュー項目のスタイル*/
境界線: 1px 実線 #888;
パディング: 3px 10px;
色: #333;
背景色: #fff;
テキスト装飾: なし;
マージン: 0;
フロート: 左;
zインデックス: 1;
位置: 相対的;
}
.menu a:hover {
zインデックス: 10000;
位置: 相対的;
パディング: 8px 20px 8px 20px;
背景色: #aed8fb;
左境界線: 1px 実線 #888;
マージン: -5px -10px 0 -10px;
}
.menu a + a:hover {
右マージン: -10px;
左マージン: -11px;
}
.menu a + a {
左境界線: なし;
}
.メニュー .クリア {
フロート: なし;
クリア: 両方;
}
</スタイル>
</head>
<本文>
<div class="メニュー">
<a href="#">アイテム 1</a>
<a href="#">アイテム 2</a>
<a href="#">項目 3</a>
<a href="#">項目 4</a>
<div class="clear"></div>
</div>
</本文>
</html>

ブラウザのサポート: Firefox、Chrome、Safari、IE 7 以上
4. 子セレクター<br />子セレクターは、他の要素の子である要素と一致します。サブセレクターは、「>」で区切られた 2 つ以上のセレクターで構成されます。
/* DIV 要素内のすべての P 要素に一致します */
div > p { .. スタイル .. }
div ol>li p { .. スタイル ..}
コンテンツを含む div 内の段落内のすべての画像を左揃えにしたい場合は、次のコードが役立ちます。

コードをコピー

コードは次のとおりです。

<div class="content">
<p>Lorem lorem lorem <img src="/images.jpg" alt="この画像は左揃えにしてください" /></p>
<p>Lorem lorem lorem <img src="/images.jpg" alt="この画像も左揃えにする必要があります" /> Lorem lorem lorem </p>
<img src="/images.jpg" alt="この画像は左揃えにしないでください" />
</div>

次の操作を実行できます。
div.content p > img {float: left;}
ブラウザのサポート: Firefox、Chrome、Safari、IE 7 以上。
5. 一般的な選択のヒント<br />最後に、役立つヒントをいくつか紹介します。ご存知のとおり、ユニバーサルセレクタ (「*」) は任意の要素に一致し、他のセレクタと組み合わせると、いくつかの場所で役立ちます。
例えば：

コードをコピー

コードは次のとおりです。

/* "href" 属性を持つすべての要素に一致します */
*[href] { .. スタイル ..}
/* 空の 'alt' 属性を持つすべての要素に一致します */
*[alt=""]
/* DIV 要素の孫（直接の子ではない）であるすべての P 要素に一致します */
div * p { .. スタイル ..}

ブラウザのサポート: Firefox、Chrome、Safari、IE 7 以上。

<<: MySQL インデックスプッシュダウンを 5 分で学ぶ

>>: エージェントを介したzabbix監視プロセスとポートの詳細なプロセス