要素セレクタ
：あなたは、最初の必要性は、要素間の関係知っている
親要素を：それは要素の直接の子要素が含ま
直接の親要素が含まれています：子要素
の祖先要素：直接または間接の子孫要素が要素が含まれている
要素を子孫：直接的または間接的に祖先含まを要素の
兄弟：同じ親要素を持つ要素
子孫要素セレクタ
役割：指定された要素の子孫要素が指定された選択
祖先要素の子孫要素{}：構文
div span {
color: red;
}
<div>
<span>第一个span。</span> // 颜色为red
<span>第二个span。</span> // 颜色为red
</div>
子要素セレクタ
役割：指定された子要素の親要素に指定選択し
た親要素>子要素：構文
div > span {
color: greenyellow;
}
<div>
<span>第一个span。</span> // 颜色为greenyellow
<span>第二个span。</span> // 颜色为greenyellow
<div>第三个元素</div> // 颜色不变
</div>
疑似クラス
これは、特殊な状態要素を表します。
：アクティブなスタイルが有効の要素に追加されます。
：フォーカスは、キーボード入力フォーカスを持つ要素にスタイルを追加します。
：マウスがスタイルに要素を追加し、上部要素に懸濁したホバー。
：未訪問のリンクにスタイルを追加するためのリンク。
：追加のスタイルへの訪問のリンクがアクセスされました。（プライバシーの問題は、セットのみの色缶）
：まず、子供は最初の子要素にスタイルを追加します。
：langは指定されたlang属性を持つ要素にスタイルを追加します。
::選択一致が強調表示又はユーザの一部を選択します。
a:link { /* 未访问的链接 */
color: #FF0000
}
擬似要素
これは、いくつかの特別な位置にある要素を表します。
：最初の文字は、テキストの最初の文字に特別なスタイルを追加します。
：最初の行には、テキストの最初の行に特別なスタイルを追加します。
：要素の前にコンテンツを追加する前に。
：要素の後にコンテンツを追加した後。
h1:after {
content:url(logo.gif);
}
属性セレクタ
処置：指定された要素は、属性または属性値の要素に応じて選択することができます。
構文：要素[属性名]指定された属性含む選択
要素を[属性名=「属性値」]指定された属性値を含む選択し
、[属性名は^ =「属性値」]選択した属性の値は、要素の内容を指定するために開始し
、[属性名$ =「属性値」]終了要素の内容を指定するには、属性値を選択し
、[*属性名=「属性値」]選択属性値コンテンツ要素を含みます
p[title] {
background-color: yellow;
}
p[title="hello"] {
background-color: yellow;
}
<p title="hello">文字</p>
その他のサブ要素セレクタ
- ：第一子
p:first-child { //匹配作为任何元素的第一个子元素的 p 元素
color: red;
}
<h1>这是标题</h1> // 没有元素颜色为red
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
ヒント：セレクター選択p要素の最初の子のように第一子：最も一般的な間違いは、そのpとします。
- ：最後の子
の親要素の指定されたスタイル最後の要素の。
p:last-child // 指定父元素中最后一个p元素的背景色
{
background:#ff0000;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<h1>这是标题</h1> // 没有元素背景#ff0000
ヒント：セレクタのような最後の子が最後の要素をp要素を選択します：最も一般的な間違いは、pということです。
- ：n番目の子は
n番目の位置、および指定された要素にマッチします。これは奇数要素が奇数位置を示し、偶数偶数位置を表します。
p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:#ff0000;
}
<h1>这是标题</h1>
<p>第一个段落。</p> // 颜色为#ff0000
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
- ：第一のタイプは、
特定のタイプの最初の要素を選択します。
p:first-of-type
{
background:#ff0000;
}
<h1>这是标题</h1>
<p>第一个段落。</p> // 颜色为#ff0000
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
- ：最後の型
、最後の特定の種類の選択素子。
p:last-of-type
{
background:#ff0000;
}
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>// 颜色为#ff0000
<h1>这是标题</h1>
- ：n番目の型の
n番目の要素の特定のタイプを選択します。
p:nth-child(2) // 匹配其父元素的第二个子元素为 p 的背景色
{
background:#ff0000;
}
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p> // 颜色为#ff0000
<p>第三个段落。</p>
<p>第四个段落。</p>
兄弟セレクタ
処置：要素を選択し次に指定された兄弟（ない任意の要素を介して）
構文要素2つの要素1（即時素子1に先行する選択された要素は、要素2の要素である）
+要素1要素2 （後者）
否定擬似クラス
役割：あなたは内の要素から選択された要素の一部排除することができます
構文::ません（セレクタ）
p:not(.hello) {
background: yellow
}
<p>第一个段落。</p> // 背景yellow
<p class="hello">第二个段落。 // 无背景
<p>第三个段落。</p> // 背景yellow
<p>第四个段落。</p> // 背景yellow
