CSS3 属性セレクターのいくつかの使用法 (コード例)

この記事の目標:

1. CSS3 での属性セレクターのいくつかの使用法をマスターする

質問:

1. を達成するには div css を使用する必要があります。次のような効果がありますが、CSS が必要です。すべての属性セレクターは、要素スタイルを設定するためにファイル内で使用されます。

補足:

1. div 全体の幅は次のとおりです。 850、ページの中央に表示する必要があります

2。タイトル サイズは 28、太字表示

3。その他のフォント サイズは 14px

4有名人のゴシップをクリックして tobagua.html にジャンプし、軍事ニュースをクリックして toaffairs.html にジャンプします。追加の資料が必要ないため、資料を準備するステップを省略できます

2.index.html を作成し、アーキテクチャを記述します。アーキテクチャを分析するにはどうすればよいですか?

アイデア分析:

1. 目標は左と右の 2 つの部分に分かれており、それぞれのセクションにはニュースのリストが表示されますが、各ニュースのカテゴリが異なり、一部のスタイルも異なります

2. Lin Xinru を含むニュースの色は別途設定する必要があります

3. f15 を含むニュースの色は別途設定する必要があります

4. F15 を含むニュースの色も別途設定する必要があります。 2 つのパートのタイトルも個別に設定する必要があるため、属性セレクター

5 を使用して一致できるように、いくつかの属性を個別に設定する必要があります。各パートはリストであるため、次を使用できます。 ul ですが、どちらの ul もフラッシュであるため、float を使用する必要があります。float なので、外側のコンテナがまだ浮動要素を確実にラップできるようにするために、最後に float をクリアするクリア要素を追加する必要があります

分析によると、次のコードが得られます

3. スタイルを記述し、css フォルダーを作成し、その中に新しいindex.cssを作成します。スタイルの記述方法内部では、以下が分析アイデアです。

アイデア分析:

コンテナーコンテナーのすべてのサブ要素

1。 style は設定に一致するように属性セレクターを使用する必要があります。私たちのアイデアは、最初に属性 container=true を持つ要素を取得し、次に最も一般的なパディングやマージンなどの一般的なスタイルをその要素に設定することです。これは当てはまらないためです。設定する際、一部の要素のデフォルトのパディングがわからない場合がありますが、ロジックの作成に集中できるように、パディングとマージンを 0

に統一しましたので、次のコードをindex.cssに追加します。

container コンテナ

1. 要件によると、最も外側のコンテナの幅は 850 で、中央に配置され、上部と下部にパディングがあります。 、左右にグレーの境界線があり、デフォルトのフォント サイズは 14px です。コンテナ コンテナはどれですか? それは、コンテナ属性 = true の要素です。

したがって、次のコードをindex.css に追加します。

2 タイトルのパブリック スタイル設定

1. タイトルは中央に配置し、フォント サイズ 28 ピクセルで太字で表示する必要があるため、どれがタイトルであるか、つまり、属性 title=true を持つすべての要素

したがって、次のコードをindex.css に追加します。

2 つのタイトル接続の個別の設定

##1. ゴシップのタイトルの色は赤です

##2. 軍事タイトルの色は青です

3. 八卦文字列を含む href 属性は、左側のタイトル接続です。 toaffairs で始まる href 属性は、右側のタイトル接続です。

*= は包含を意味し、^= は先頭を意味します

したがって、次のコードをindex.css に追加します。

左右のフローティング div 設定

1. 左の div は左にフローティングする必要があるので、どれが左の div ですか? 実際には、left 属性を持つ div です。 true

2 となります。右の div は右にフロートする必要があるので、どの div が右の div ですか? 実際、それは true

3 という正しい属性を持つ div です。この関数は、float をクリアすることです。 div は、実際には、clear で終わるクラスを持つクラスです。注: $= は、何で終わるかを示します。

したがって、次のコードをindex.cssに追加します:

li settings

1. li には黒い点が含まれていないため、list-style:none

2. 属性クラスにニュースが含まれる要素文字列は li

3. 効果に従って、上下左右の間に一定の間隔が空きますそこで、次のコードをindex.cssに追加します:

Ruby Lin のタイトル設定が含まれています

1. このタイトルの色は土っぽい黄色で、フォントは太字です

2. クラス属性の末尾lxr は Ruby Lin のタイトルなので、$=

f15

1 を含むタイトル設定を使用します。タイトルの色は青、フォントは太字です

2. class 属性に f15 文字列が含まれるタイトルがターゲットのタイトルとなるため、*=

を使用します。これまでのところ、index.css の全体の内容は次のとおりです。 #

[class*=f15]{ color:blue; font-weight: bold; }

ログイン後にコピー

次に、index.css をindex.html

に導入して実行します。結果は次のようになります:

これまでのところ、必要な結果が達成されています

概要:

1. 属性セレクターのいくつかの使用法を説明しました (例: #)

A=B は、A 属性値が B 文字列と等しいことを意味します

A*=B は、A 属性値に B 文字列

A が含まれることを意味します$=B A 属性値が B 文字列

で終わることを示します。

A^=B は、A 属性値が B 文字列 ### で始まることを示します。

以上がCSS3 属性セレクターのいくつかの使用法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。