ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS学習メモ(1):selector_html/css_WEB-ITnose

CSS学習メモ(1):selector_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:20:08
オリジナル
1282 人が閲覧しました

1. 要素セレクター

HTML ドキュメント要素は最も基本的なセレクター

例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    p {color:blue;}</style></head><body>    <p>这一段话是蓝色的。</p></body></html>
ログイン後にコピー

この例では

要素のフォントの色を青に設定し、要素セレクターが機能します。ドキュメント内のすべての

要素。同様に、次のように複数の要素にスタイルを同時に適用することもできます。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    h1,p {color:blue;}</style></head><body>    <h1>标题颜色</h1>    <p>这一段话是蓝色的。</p></body></html>
ログイン後にコピー

複数の要素にスタイルを適用する場合は、カンマで区切ります。

*ワイルドカード セレクターとして、任意の要素と一致できます。

形式: 要素|ワイルドカード

2. クラスセレクター

クラスセレクターのスタイルは、次のようなクラス属性に関連付けられている必要があります:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">    .one {color:blue;}</style></head><body>    <p class="one">第一段。</p>    <p>第二段</p>    <p class="one">第三段</p></body></html>
ログイン後にコピー

Format: 。クラス名

コード 3 つの

要素があり、そのうちの 2 つは class="one" というクラス属性を持っています。これらの 2 つの

を指定するには、