一般的なCSSセレクタ
CSSセレクタの役割は、HTMLページから要素の特定のクラスを識別することで、一般的な表情で、カテゴリ以下のCSSセレクタを使用します！
ワイルドカードセレクタ
ワイルドカードの共通セレクタ「*」記号は、ページがすべての要素を一致させることができ、それは最も広い範囲内のすべてのセレクタで、示しています。
基本的な構文：* {項目1：1プロパティ値、項目2：プロパティ値2;}
例として
選択したスタイルを使用するには、すべてのクリアランスマージンデフォルトのHTMLタグを定義しています。
*{
margin：0； /*定义外边距*/
padding：0； /*定义内边距*/
}
それはかどうかに関係なく、スタイルマークの、HTMLタグのすべてに効果のパターンを設定しますが、コードの実行速度を低下させるのでしかし、実際の開発では、ワイルドカードセレクタの使用を推奨していません。
第二に、タグセレクタ
タグ名で分類セレクタとしてHTMLタグ名とタグセレクタ手段が、ラベルのいくつかの並べ替えのページのための統一されたCSSスタイルを指定します。
基本的な構文：タグ名{項目1：1プロパティ値、項目2：プロパティ値2;}
タグ名などのすべてのHTMLタグは、例えば、A、ボディ、P、H1などのために、選択することができます。ページ・タイプのすべてのタグの有効なラベル定義されたスタイルセレクター。
例としては
、P-選択されたHTMLページには、すべての段落のスタイルを定義します。
p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
最大の利点は、スタイルのラベルの同じタイプのページのクイックタグセレクタであり、これはまた、その欠点だった、デザインスタイルを区別することはできません。
第三に、クラスセレクタ
クラスセレクタの使用**「」**（ドット英語）が識別され、クラス名が続きます。
基本的な構文：クラス名{項目1：1プロパティ値、項目2：プロパティ値2;}
文法、クラス名は、HTML要素のclass属性の値であり、ほとんどのHTML要素には、クラス属性を定義することができます。
例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 <style type="text/css">
7 .red{color: red;}
8 .green{color:green;}
9 .font22{font-size:22px;}
10 p{ text-decoration:underline; font- family:"微软雅黑"; }
11 </style>
12 </head>
13 <body>
14 <h2 class="red">二级标题文本</h2>
15 <p class-"green font22">段落文本内容</p>
16 <p class="red font22">段落二文本内容</p>
17 <p>段落三文本内容</p>
18 </body>
19 </html>
最大の利点クラスセレクタ要素オブジェクトは、別個または同じスタイルとして定義することができ、かつ複数のマークは、クラス名で使用されてもよい、同じスタイルを指定した標識の異なるタイプとして実装されてもよいです。一方、HTML要素が複数のクラスのカテゴリ、複数のパターンであってもよい、スペースケースで区切られたクラス名、前2つので説明したように複数のコードが必要<p>マーカー。
注：最初の文字のクラス名は、数字、および厳密に大文字と小文字を区別を使用することはできません。一般的に小文字の英文字を使用します。
四、IDセレクタ
** IDセレクタ用途「＃」が**、識別されたIDが続きます。
基本的な構文：#ID名{項目1：1プロパティ値、項目2：プロパティ値2;}
構文、id名は、HTML要素のid属性値であり、ほとんどのHTML要素にはid属性を定義することができ、id値の要素が一意であり、唯一の特定の要素上の文書に対応することができます。
例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 <style type="text/css">
7 #bold{font -weight:bold; }
8 #font24 {font-size:24px; }
9 </style>
10 </head>
11 <body>
12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
16 </body>
17 </html>
注：IDを呼び出すときに多くのブラウザが、複数のタグで使用したのと同じIDを許可していないと文句はありませんが、そのようなJavaScriptエラーなどのスクリプト言語。値のセレクタ複数上記で定義され、さらに、IDは、選択されたクラスをサポートしていません。
V.属性セレクタ
属性セレクタは、HTML要素の指定された属性だけでなく、クラスとid属性のスタイルを設定している場合があります。
構文：[タグ名] {項目1：1プロパティ値、項目2：プロパティ値2;}
注:!だけDOCTYPE、IE7とIE8のサポート属性セレクタを指定した場合のみ。IE6とそれ以前のバージョンでは、選択されたプロパティをサポートしていません。
CSSセレクタリファレンス・マニュアル：
| セレクタ | 説明 |
|---|---|
| [属性] | 指定された属性を持つ要素を選択します |
| [属性=値] | 指定された属性と値を持つ要素を選択します |
| [属性〜=値] | 指定された単語を含む要素のプロパティ値を選択します |
| 【attributeI =値] | 指定された値で始まるようになる要素の属性値を選択するため、この値は、全体の単語でなければなりません |
| [属性^ =値] | 各要素のマッチング属性値が指定した値で始まります |
| [属性$ =値] | 各要素の末尾に指定された値を持つ属性値をマッチング |
| [属性* =値] | これは、各要素の値と一致する指定された属性値を含みます |
例
1、title属性を持つすべての要素のスタイルを設定します。
[title]
{
color:red;
}
2、タイトル=「W3School」スタイル設定のすべての要素について：
[title=W3School]
{
border:5px solid blue;
}
3、titleプロパティの指定した値にすべての要素を含むスタイルセット。これは、スペースで区切られた属性値に適用されます。
[title~=hello] { color:red; }
4、スタイルセットlang属性を持つすべての要素は、指定された値が含まれています。ハイフンで区切られた値の属性：
[lang|=en] { color:red; }
図5は、設定フォームスタイル
シートはスタイルまたはクラスIDのが設けられていない場合、属性セレクタは特に有用です。
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
使用属性セレクタは、エレメントのプロパティを1つだけ指定することができ、また属性と同時に、それに対応する要素の属性値を指定することができます。
第六に、セレクタを設定します
セレクタは、同時に複数のセレクタと一致セットと複数のセレクタを取るように設定され、セレクタは、EMのように、カンマで区切られた、強いです{}。
構文：
タグ名のタグ名2 {項目1：1プロパティ値、項目2：プロパティ値2;}
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="https://www.cnblogs.com/jizuiku"/>
<title></title>
<style type="text/css">
span,div, .content {
color:darkorange;
}
</style>
</head>
<body>
<span>博客园</span>
<div>给最苦</div>
<p class="content">网页设计</p>
</body>
</html>
そして、セレクタが同じスタイル、集団文のうち抽出された複数のタグは、読みやすいコードを最適化という利点を持っている設定。
七つの子孫セレクタ
また子孫を既知の子孫セレクタは、特定の要素を選択するセレクタを含みます。.asideNav李{}は、第1のセレクタは、第二の要素と第1のセレクタに属すると一致表します。
構文：
ラベルラベル名1名2 {項目1：1プロパティ値、項目2：プロパティ値2;}
CSSでは、子孫を決定するHTMLドキュメントのDOMのコンテキストに基づいています。要素は、要素は、内層子孫要素になったときにネストが発生します。要素Bを要素Aの内部に埋め込まれている、B Aは子孫です。また、Aの子孫のBは、家族関係のように、子孫です。
子孫セレクタを画定する、エディトリアル外側要素、裏面に書かれた内部要素は、空白で区切られました。子孫セレクタは、その子孫のすべてのレベルに影響を与えるだろう、何のレベル制限はありません。以下のような：
div p { color: red; }
セレクタの上に、役割div要素をp要素のすべての子孫を選択することで、将来の世代のためのdiv祖先要素をp要素は、関係なく、p要素のdiv要素の子である、または深い孫との関係の要素、選択されます。言い換えれば、子孫pの多くの世代がdiv要素であるどんなには、テキスト内のp要素が赤に変わります。
例
子孫セレクタ空間は、当然のことながら、2つに限定されるものではなく、下位階層を表すために使用されます。必要に応じて、希望するまでの要素は、スタイルを適用することを、祖先要素のいずれかから開始し、それは、子孫のセレクターチェーンを置くことができます。以下のような：
<ul>
<li><a href="/home/">首页</a></li>
<li><a href="/new/">新房</a></li>
<li><a href="/esf/">二手房</a></li>
<ul>
<li><a href="/sale/">出售房源</a></li>
<li><a href="/buy/">求购房源</a></li>
</ul>
<li><a href="/rent/">租房</a></li>
</ul>
ナビゲーションメニューは、すべてのアンカーテキストのフォントサイズが16pxにあるかどう子孫セレクタはその子孫のすべてのレベルに影響しますので、あなたは、子孫UL子孫セレクタUL aですべての要素を選択することができます。以下のような：
ul a {
font-size: 16px;
}
彼らが第2のレベルのリスト項目のフォントサイズのアンカーテキストをしたい場合は、ULの子孫のセレクターul.nav通じ関係のこの多層子孫が、唯一の第二段階のアンカーテキストのリスト項目を選択することができ、12ピクセルです。
ul li a {
font-size: 12px;
}
もちろん、これは、より正確な制御を達成するために、子孫のセレクターUL、李、UL、李を書き込むことができます。
注：
1、限りラベルが指定された子孫に配置されている、息子、孫の子孫が含まれます。
図2に示すように、タグ名がない1,2、また、IDとクラス名を使用することができてもよく、各クラスIDによって選択されます。
図3に示すように、セレクタは無限に子孫を誘導することができます。
八人の子孫セレクタ
子孫セレクタ用途は**「>」**第2のセレクタと一致し、最初の要素は、子孫セレクタであるUL>のLi {}、として表さ。
構文：
タグ名1> {2タグ名項目1：1プロパティ値、項目2：プロパティ値2;}
例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例</title>
<style>
#box>p{
color: darkorange; /*设置颜色为 深橙色*/
font-size: 80px;
}
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
狸花猫
</p>
</div>
</div>
</div>
<p>
大橘猫
</p>
</div>
</body>
</body>
</html>
注意：
1、唯一の彼の息子を見つけるために、他のネストされたタグを見つけることができません。
図2に示すように、サブエレメントセレクタはそれを見つけるために、他のIDとクラスセレクタを使用することができます。図3に示すように、サブエレメントセレクタはまた、>記号は継続することができます。
ナイン、兄弟セレクタ（+と - ）
Pなどの隣接兄弟+記号セレクタ用途、+ {}、第1のセレクタと一致するとすぐに、このような直ちにp要素の要素の後のように、第2のセレクタ要素と一致います。
あなたはすぐに要素の後に別の要素を選択する必要があり、両方の要素が同じ親を持っている場合は、兄弟は、隣接セレクタを使用することができます。
構文：名前タグ名タグ2 1 + {項目1：1プロパティ値、項目2：プロパティ値2;}
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
</head>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
兄弟は上記の兄弟のスタイルに影響を与えません。次のp styleタグに影響を与えます。
「+」かかと「と」ではないのと同じ意味の意味は、セレクタの弟スタイルは兄弟要素に適用されることに注意してくださいが、スタイル要素を基準とは何の関係もありません、上記の実施形態は、H1タグに影響を与えずに、パターンp要素に影響を与えますスタイル。
2人の兄弟が同じ要素がある場合、それはサイクルを達成するためになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li + li {
color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
そして、〜セレクター：すべてのアクションが指定された要素の兄弟の背後にある検索します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>
X.ダミーセレクタ
ダミーセレクタは特別なセレクタである、それは、擬似クラスセレクタと擬似オブジェクトセレクタの2種類に分けられます。
疑似クラスセレクタ：
CSSは、HTMLタグを対応する5つの基本的な疑似クラスセレクタ、5つの状態を提供します。
| 疑似クラスセレクタ | 効果 | アプリケーションオブジェクト |
|---|---|---|
| ：ホバー | フラグパターンは、マウスオーバー（横切って）定義されている場合 | すべて表示マーク |
| ：リンク | ハイパーリンクの状態でのカスタムタグのスタイル | ラベル |
| ：フォーカス | フォーカスを得ることに定義されたマーカーのスタイル | ラベル（IEブラウザがサポートしていません） |
| ：訪問 | マークの後にアクセスするスタイルの定義 | ラベル |
| ：アクティブ | 選択した時点でのカスタムタグのスタイル | ラベル |
例
以下は、ラベルである5
<a href="#" id="a1">链接1</a>
<a href="#" id="a2">链接2</a>
<a href="#" id="a3">链接3</a>
<a href="#" id="a4">链接4</a>
<a href="#" id="a5">链接5</a>
いくつかのCSSスタイルを追加します。
a{
padding: 10px;
color:black; /*初始颜色全为黑色*/
font-weight: bold;
}
#a1:hover{
color:red; /*当鼠标悬停时链接1变成红色*/
}
#a2:link{
background-color: blue; /*给链接2添加蓝色的背景色*/
}
#a3:focus{
color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
}
#a4:visited{
color:green; /*被访问过后的链接4变为绿色*/
}
#a5:active{
background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
}
これら5つの基本的な擬似クラスセレクタに加えて、CSSにも対応など：擬似クラスセレクタ言語選択等「::第一子」最初の要素セレクタと「LANG（）」。
2.疑似オブジェクト選択
擬似オブジェクトセレクタは、オブジェクト内の部分パターン要素を定義します。
| 擬似オブジェクトセレクタ | 効果 |
|---|---|
| ：最初の文字 | 最初の文字スタイルの定義テキスト |
| ：最初の行 | カスタムテキストスタイルの最初の行 |
| ：前 | オブジェクトのコンテンツのスタイルを定義する前に |
| ：後 | コンテンツオブジェクトのスタイルを定義した後 |
例
<p>我是文本我是文本我是文本我是文本</p>
用途：スタイルの後の後：beforeと：
p:before{
content:'我说：“';/*在文本前面追加内容*/
color:red;
}
p:after{
content:'。”我说完了！';/*在文本结尾追加内容*/
color:red;
}
これらは、共通のCSSセレクタあなたです、あなたはそれを覚えていますか？^_^
