CSS3 属性セレクターの詳細な説明と Shuangseqiu_html/css_WEB-ITnose の実践的な開発

前の章では、インライン スタイル、ID セレクター、クラス セレクター、タグ セレクターを使用して要素にスタイルを適用できることを学びました。

特定の属性をすべて定義する要素にスタイルを適用したい場合、この時点で何をすべきでしょうか?

このセクションでは、Double Color Ball Case と Document Type Prompt Icon Case を使用して、 属性セレクターを導入し、適用します。

二色ボールケース:

ご存知のように、二色ボールには7つのボールがあり、6つの赤いボールと1つの青いボールがあります。まず、ページ上に 7 つの spam タグを定義します:

01020304 5 span>0607

この時点でページを実行すると、すべての数字がつながっていることがわかります:

ghen

タグセレクター

を使用して、外部スタイルシートの数値ボール間の距離を調整します。

しかし、各ボールには円の背景があることはわかっています。これを実現するにはどうすればよいでしょうか? CSS2 では、背景画像を介してのみこれを行うことができますが、.balls span{

CSS3

では、ラベルの角を設定するだけで済みます。半径を達成できます。以下のコードが理解できなくても、後ほど専用の記事で説明しますので、問題ありません。ここで、次の CSS3 スタイル コードが角丸の設定に使用されることを覚えておく必要があります。 上記のスタイル コードを改善してみましょう (

赤いフォント

が新しく追加されたスタイルです):

margin-left:0.8em; /*デジタル ボール間の距離を 0.8em に設定します* / display:block; /*幅と高さを簡単に調整できるように数字のボールのスパンをブロックに設定します*/ float:left; /*数字のボールを左にフロートさせて 1 行に表示します*/

width:1.4em; /*デジタルボールのスパンの幅と高さを設定します*/ height:1.4em;

border:1px Solid red;/*デジタルボールのボーダーを赤に設定します。設定したスタイルがすでに有効であるかどうかを確認するのが簡単です*/

-webkit-border-radius:0.7em;/*半径が全長の半分の場合、円が形成されます*/

-moz-border-radius:0.7em;

border-radius:0.7em;

text-align:center; /*数字のボール内の単語を水平方向に中央に表示します*/

line-height:1.4 em; /*数字のボール内の単語を縦方向に中央に表示します */

}

この時点でデモを実行すると、球のプロトタイプが完成しました:

スタイルがなぜ同じスパンラベルセレクターで書かれているのかと疑問に思う人もいるかもしれません、なぜ属性について言及していないのですかセレクター?

上記のスタイルはすべての球体に共通の属性スタイルなので、すべて同じタグ内に記述されますのでご安心ください。最初の 6 つのボールは赤いボールで、最後の 1 つは青いボールであることがわかっています。では、これにどう対処するのでしょうか。

まず、CSS2 から導入された属性セレクターを次に示します。

E[attr="value"]E[attr~="value"]E[attr|="value"]E[attr^="value"]E[attr$="value"]E[attr*="value"]実際、上記の表から、

E[attr]	attr 属性を定義します。型要素。 E タイプを省略して [attr] を直接記述することもできます。これは、定義された attr 属性を持つすべての要素と一致することを意味します。
attr 属性値が value に設定されている一致する E タイプ要素を選択します。 E タイプを省略して [attr="value"] と直接記述することもできます。これは、すべての要素が attr="value" と一致することを意味します。
attr 属性値がリスト形式であり、各値がスペースで区切られ、value の値を持つすべての E タイプ要素と一致するように選択します。なお、Eは省略可能です。
attr 属性値が value であるか、value- で始まる E タイプ要素と一致するように選択します。なお、Eタイプは省略可能です。
attr 属性値が value で始まる E タイプ要素と一致するように選択します。 E タグ セレクターは省略できることに注意してください。
attr 属性値の末尾に value が付いている E タイプ要素と一致するように選択します。 E タグ セレクターは省略できることに注意してください。
attr 属性値に value が含まれる E タイプ要素と一致するように選択します。 E タグ セレクターは省略できることに注意してください。

属性セレクター

は実際にタグ セレクターに属性制限を追加しており、タグ セレクターをさらに改良したものであることがわかります。 属性セレクターの基本的な知識を理解したら、2 色のボールに背景色を追加できます。デジタル ボール間の距離は 0.8em*/

display:block; /*幅と高さを調整しやすくするために、デジタル ボールのスパンをブロックに設定します*/

float:left; /*デジタル ボールを浮かせます。左に移動して 1 行で表示 */

width:1.4em; /*デジタル ボール スパンの幅と高さを設定します*/

height:1.4em;

border:1px Solid red;/*Setデジタル ボールの境界線を赤にします。これは、スタイルが有効になっているかどうかを簡単に確認するためです*/

-webkit-border-radius:0.7em;/*半径が半分の場合。全長に応じて円が形成されます*/

-moz-border-radius: 0.7em;

border-radius:0.7em;

text-align:center; /*数字のボール内の単語を水平に表示します。 center*/

line-height:1.4em; /*数字ボール内の単語を中央に水平に表示します 垂直に中央に表示します*/

color:#FFFFFF /*spanにフォントの色を設定します*/

box-shadow:0.15em 0.15em #999; /*立体感を高めるためにボールに影効果を適用します*/

}

/*すべてのボールにスタイルを適用します*/

.balls spam [title]{ /*title 属性が設定されたスパンにスタイルを適用*/

background-color:#FF0000;

}

/*クラスが blueball で終わるスパン要素にスタイルを適用*/

.balls spam [class$="blueball"]{

背景色:#0033CC;

}

この時点でデモを実行すると、二色のボールのレンダリングが表示されます。

慎重なネチズンは、最初のボールでブルーボール スタイルも設定していることに気づいたかもしれませんが、それでも背景が赤くなっており、E[attr$="value"] が実際にスタイルを追加するためのものであることを証明しています。 attr 属性値が value で終わる E 要素。

次に、ドキュメント タイプ プロンプト アイコンの場合の説明を続けましょう:

まずページを作成します:

}

< ; Meta charset =” utf-8″＆gt; CSS3 ケース開発

」>CSS3 チュートリアル共有プラン

css3.doc」 >CSS3 関連のブログ投稿

>著者プロフィール

div>

まだスタイルが追加されていないため、効果は以下のようになります:

ここでそれを適用します。外部スタイルシート Style:

.prefer_docs dd{ /*dd から dl 境界までの距離をクリア*/

margin-left:0px;

}

.prefer_docs ul{/*UL スタイルをリセット* /

list -style-type:none;

padding-left:0px;

margin-left:0px;

}

.prefer_docs li{/*推奨ドキュメントの上下の距離を調整します*/

margin-bottom:2px;

.prefer_docs a{/*ドキュメントのハイパーリンクから下線を削除*/

text-decoration:none;

}

.prefer_docs a:hover{/*ハイパーリンクにスタイルを適用マウスオーバー時*/

color:red;

text-decoration:underline;

}

.prefer_docs a spat{ /*ドキュメントタイプアイコンの表示領域サイズを定義*/

background: no-repeat;

display:block;

height:16px;

width:16px;

float:left;

margin-right:2px;

}

.prefer_docs a spa{ /*ドキュメントタイプの背景画像をインポート*/

background-image: url(pkg_icon.png);

}

.prefer_docs a[href$="ppt"] scan{/*ppt で終わるものには、ppt アイコンを適用します*/

background-position:- 856px -36px;

}

.prefer_docs a[href*="pdf"] scan{/*PDF テキストを含むリンクの場合は、PDF アイコンを適用します*/

background-position:-625px -36px;

}

.prefer_docs a[class|="doc"] scan{/*クラスに doc または doc- で始まるリンクを与え、ドキュメント アイコンを適用します*/

background-position:-877px -36px;

}

.prefer_docs a [class~="net"] スパン{/* class 属性で、ネット値を含むリンクはインターネット アイコンを適用します*/

background-position:-520px -36px;

}

最後に、実行中のエフェクトを見てみましょう:

上記は、属性セレクターを使用して、対応するアイコンをドキュメントのダウンロード リンクに適用するコードのデモです。

もちろん、擬似クラス セレクターや擬似要素セレクターなど、多くのセレクターがありますが、ここでは詳しく説明しません。今後の例で使用する場合は、さらに詳しく説明します。

インターネット技術交換グループへようこそ: 62329335

個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。