まず、それの概念をまとめ、（そのようなあなたの特性の一つは、私の要求に準拠して、私はあなたに申込書を与える）CSSスタイルを適用するためにHTML要素を選択するための属性属性セレクタに基づいています。属性セレクタは、HTML要素のスタイル属性に一致するように設定されています。
すべての属性セレクタの例の最初の、コード部分HTMLのこの部分です。
<body>
<p align="center">111</p>
<p>222</p>
<p align="left">333</p>
</body>3 <P>段落の内容は、そのプロパティは、左揃え、無料、センタリングされ、111222333です。
属性セレクタの基本形式：名札[プロパティが必須] {CSSプロパティ名：属性}
例えば、最も基本的な：
タグ名[属性]
<style>
p[align]{
color: red;
}
</style>すべての<P>タグは、長いとして赤色に染色資格align属性があるとことを意味しています。222は黒、赤111及び333の結果を実行します。
タグ名[=属性「属性」]
<style>
p[align='center']{
color: red;
}
</style>手段そのすべての<p>タグ限り、赤色染料のALIGN属性「中心」。ブラック赤111、222及び333の動作結果。
タグ名[属性^ = '属性'] /タグ名[属性$ = '属性']
<style>
p[align^='c']{
color: red;
}
</style>手段赤色染料の初めにすべての<P>タグ、ALIGN属性「C」という。ブラック赤111、222及び333の動作結果。
同様に、^ $、赤色染料の場合ALIGN属性「C」末端へ。
名前タグ[* =属性「属性」]
<style>
p[align*='t']{
color: red;
}
</style>すべての<P>タグ、ALIGN属性は、文字列「C」が赤色に染色されるが含まれています。それは111333赤です。
疑似クラスセレクタ
ダイナミック疑似クラスセレクタ、私はそれをクリックする前にHTML要素だと思うし、次にこれら4例の瞬間と、一時的なホバースタイルをクリックします。
<body>
<div class="test">
</div>
</body>
<style>
.test{
/* 基础样式 */
width: 100px;
height: 100px;
}
.test:link{
/* 未被点击 */
background-color: grey;
}
.test:hover{
/* 鼠标悬停 */
background-color: red;
}
.test:active{
/* 鼠标点击瞬间 */
background-color: black;
}
.test:visited{
/* 点击之后 */
background-color: teal;
}
</style>カモフラージュ構造セレクタ
文書構造の特殊性の使用は、親要素などの要素が、一つだけ子要素を持っている、というように一致させます。
例えば、タグ名：唯一の子の場合は、その要素の一つだけの親クラスのクラスを表します。
ラベル名は、次のような：のみ、最初の親クラスの最初の要素はクラスと一致して表しています。前記タグ名：n番目の子（3）は、第3を表します。
例えば、タグ名：唯一の最後には、親クラスの最後の要素はクラスと一致しています。前記タグ名：第n-最後の子（3）最後の3を表します。
そこに多くの他のものがありますが、個人的な感情は、基本的に使用するつもりはない、空想です......
タグ名：ユニーク表すだけ-の型子要素。
ラベル名：第一の型の第1子と一致する要素。
ラベル名：最後の型最後の子要素にマッチし、n番目の-の型（3）同様に、
ラベル名：空のHTML要素には子要素は表していません
状態の擬似クラス
そのような目に見えるかどうかのようなHTML要素の状態である......
ラベル名：有効になって目に見えるHTML属性を表し、ディスイネーブルに共感
ラベル名：チェックするには、ラジオボタン、チェックボックスなどのHTML要素の選択を示すために、
タグ名：以下ではない（）擬似クラス陰性サンプルコード、IDは、Bは赤に変更されていません。
<body>
<p id="a">111</p>
<p id="b">222</p>
<p id="c">333</p>
</body>
<style>
p:not(#b){
color: red;
}
</style>
最後はもっと楽しいターゲット擬似クラスセレクタです
HTMLにおける上記の基本的な目的、コンテンツ赤い背景にジャンプすることを目指して：あなたは、機能を実装することができれば。
このように、「移動」、コンテンツ111へのジャンプ、およびディスプレイ赤の背景をクリックします。
、「ナビゲーター3」をクリックして、コンテンツ333へのジャンプ、そして赤の背景を表示します。
それはだところ、「タグ名：ターゲット」、このようなコードになります。
<body>
<a href="#a">导航1</a>
<a href="#b">导航2</a>
<a href="#c">导航3</a>
<p id="a">内容111</p>
<p id="b">内容222</p>
<p id="c">内容333</p>
</body>
<style>
p:target{
background-color: red;
}
</style>
