はじめに：私たちはコードをコーディングするとき、あなたはおそらくいくつかの要素のスタイルを追加または削除するには、以下のレコードのCSSセレクタを選択することによって、より特別の一部としてだけでなく、追加したり、最初または最後の要素にスタイルを削除する必要があります共通セレクタ：隣接兄弟セレクタ（+）、子セレクタ（>）、兄弟セレクタ（〜）、第一子,:最後の子,: n番目の子（）：n番目の最後子の（使用）。
隣接兄弟セレクタ（+）
すぐ隣の兄弟は、要素内の別の要素を選択し、両方とも同じ父親の要素を有することができます。注：文字の組み合わせと同じ子が、隣接するシンボルと組み合わさ兄弟は次の空白することができます。
デバイス。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
h1+p{
color:red;
}
</style>
</head>
<body>
<p>Hello word!</p>
<p>Hello word!</p>
<h1>Hello word!</h1>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
</body>
</html>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
次のような効果があります
兄弟は上記の兄弟のスタイルに影響を与えません。次のp styleタグに影響を与えます。
「+」かかと「と」ではないのと同じ意味の意味は、セレクタの弟スタイルは兄弟要素に適用されることに注意してくださいが、スタイル要素を基準とは何の関係もありません、上記の実施形態は、H1タグに影響を与えずに、パターンp要素に影響を与えますスタイル。
もちろん、このサイクルは、2人の兄弟が同じである場合、サイクルが再び見つけることがわかります：
例：
<style type="text/css">
li + li {
color:red;
}
</style>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
最初のliフォントの色は、赤のフォントで第二と第三の要素赤ではありません見ることができます。これは、第三のli李の兄弟は第二の要素ですので、それはまた、スタイルを適用します。
兄弟セレクタ（〜）
役割は次のいずれか指定された要素を見つけるためにあるすべての兄弟バックを。
サンプルコード：
<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>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
結果は：
子孫セレクタ（セレクタが含まれています）
あなたは、要素の子孫（子供や孫要素）の要素を選択することができます
子セレクタ（>）
要素の息子としてだけようにSunの要素、ひ孫および他の要素を含まない、要素の要素を選択し、することができます。
子孫セレクタ、セレクタ及び隣接するサブ兄弟セレクタの例示的な組合せ
次のセレクタを見てください：
HTML>本体テーブル+ UL {マージン -top：20ピクセル;}
この選択として解釈される：直接隣接する第一のUL兄弟要素はbody要素のテーブル要素に含まれているテーブル要素、本体要素に表示される選択自身のhtml要素の子です。
：まず、子セレクタ
li:first-child
{
background:yellow;
}<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
レンダリング
これは、指定された型の要素（LI）よりも、その親要素（P）の最初の要素は、最初の要素はスタイルを持っていない場合は、それは注目に値します
li:first-child
{
background:yellow;
}<ol>
<p>测试</p>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ol>レンダリング
：最後の子のセレクタ
：各セレクタに属する最後の子要素は、親要素の最後の子要素に一致します。
ヒント：P：n番目の-最後の子（1）：最後の子は、pに等しいです。
例えば：指定要素の親要素の最後の子に属するp要素の背景色：
p:last-child
{
background:#ff0000;
}<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>効果：
説明：pタグは、身体のラベルは、第五段落pの最後の要素親要素のボディです
：n番目の子（）
：n番目の子（）セレクタ、Nのサブ要素の親要素を選択するセレクタ、種類に関係なく。
p:nth-child(2)
{
background:#ff0000;
}<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>：N番目の子（）詳しい使い方
n番目の子（3）は、第3の選択リストの要素を示しています。
n番目の子（2N）は、偶数タグリストを示し、すなわち、第六、第四、第二の選択......タグ
n番目の子（2N-1）は、選択リストの奇数ラベルを表し、即ち、選択する第1、第3、第5、第7 ......タグ
n番目の子（N + 3）最後の三つ（> = 3）にリストから選択されたラベルを表します
n番目の子（-n + 3）すなわち、ラベルが3未満（<= 3）であり、0〜3の選択されたタグのリストを表します
n番目の最後-子（3）は、選択リスト]タブ3の逆を表し
：n番目の型（N）
：n番目の型（N ） と一致するように属する親要素を選択する特定のタイプ Nの各要素番目の要素のを。
nが数、キーワードや数式であってもよいです。
p:nth-of-type(2)
{
background:#ff0000;
}<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<div>测试</div>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</body>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
レンダリング：
：N番目-最後の子（）セレクタ
：N番目の最後子（N）に関係なく、要素のタイプの、最後のカウントからの子要素の開始をその要素のN番目の要素と一致するセレクタの各要素に属します。
nが数、キーワードや数式であってもよいです。
注：参照：n番目の-最後の型（）セレクタ、親要素の指定されたタイプN番目の子を選択するセレクタ、最後のカウントから子要素が開始されます。
CSS3：ないセレクタ
非指定の整合要素/セレクタの各要素を選択しない（セレクタ）。
スプレッド
複数のフレームの右側にあるメニューバーを実現するための方法は、セレクタに関連して上述した、実装は次の通りであります：
まず、従来の方法：
.nav li{
border-right:1px solid #fff;
}
.nav li:last-child{
border-right-width:0px;
}II：隣接兄弟セレクタ（+）と組み合わせて
.nav li + li{
border-left:1px solid #fff;
}第三に、結合兄弟セレクタ（〜）
.nav li:first-child ~ li{
border-left:1px solid #fff;
}第四に、組み合わせで：ありません（）セレクタ
.nav li:not(:last-child){
border-right:1px solid #fff;
}