<<<
在 CSS 中钝吮，選擇器是一種模式，用于選擇需要添加樣式的元素板辽。
"CSS" 列指示該屬性是在哪個(gè) CSS 版本中定義的奇瘦。（CSS1、CSS2 還是 CSS3劲弦。）
(1)class選擇器:
選擇并設(shè)置 class="abc" 的元素的樣式：
.abc
{
background-color:yellow;
}
.class 選擇器選取帶有指定類 (class) 的元素耳标。
選擇 class="abc" 的所有元素。
(2)id選擇器:
為 id="abc" 的元素設(shè)置樣式：
abc
{
background-color:yellow;
}
(#id 選擇器為帶有指定 id 的元素設(shè)置樣式邑跪。)
選擇 id="abc" 的所有元素次坡。
(3)*選擇器:
選擇所有元素，并設(shè)置它們的背景色：
{
background-color:yellow;
}
選擇器選取所有元素画畅。
選擇器也能選取另一個(gè)元素中的所有元素：
(4)element選擇器：
選擇并設(shè)置所有 <p> 元素的樣式：
p
{
background-color:yellow;
}
element 選擇器用于指定元素名稱的所有元素砸琅。
選擇所有 <p> 元素。
(5)element,element 選擇器：
選擇并設(shè)置所有 <h1> 樣式和所有 <p> 元素的樣式：
h1,p
{
background-color:yellow;
}
element,element 選擇器用于用于同時(shí)選取多個(gè)元素轴踱。
(選擇所有 <div> 元素和所有 <p> 元素症脂。)
如需為不同的元素設(shè)置相同的樣式，請(qǐng)用逗號(hào)來(lái)分隔每個(gè)元素淫僻。
(6)element element 選擇器:
選擇并設(shè)置位于 <div> 元素內(nèi)部的每個(gè) <p> 元素的樣式：
div p
{
background-color:yellow;
}
element element 選擇器用于選取元素內(nèi)部的元素诱篷。
選擇 <div> 元素內(nèi)部的所有 <p> 元素。
(7)element>element 選擇器:
選取父元素是 <div> 元素的每個(gè) <p> 元素雳灵，并設(shè)置其背景色：
div>p
{
background-color:yellow;
}
element>element 選擇器用于選取帶有特定父元素的元素棕所。
注釋：如果元素不是父元素的直接子元素，則不會(huì)被選擇悯辙。
(8)element+element 選擇器:
選擇 <div> 元素之后緊跟的每個(gè) <p> 元素琳省，并設(shè)置其背景色：
div+p
{
background-color:yellow;
}
element+element 選擇器用于選取第一個(gè)指定的元素之后（不是內(nèi)部）緊跟的元素迎吵。
(9)[attribute] 選擇器:
為帶有 attribute屬性的 <a> 元素設(shè)置樣式：
a[attribute]
{
background-color:yellow;
}
[attribute] 選擇器用于選取帶有指定屬性的元素。
(10)[attribute=value] 選擇器:
為 attribute="_blank" 的 <a> 元素設(shè)置樣式：
a[attribute=_blank]
{
background-color:yellow;
}
(11)[attribute~=value] 選擇器：
選擇 titile 屬性包含單詞 "flower" 的元素岛啸，并設(shè)置其樣式：
[title~=flower]
{
background-color:yellow;
}
[attribute~=value] 選擇器用于選取屬性值中包含指定詞匯的元素钓觉。
選擇 title 屬性包含單詞 "flower" 的所有元素茴肥。
(12)[attribute|=value] 選擇器:
選擇 lang 屬性值以 "en" 開(kāi)頭的元素坚踩，并設(shè)置其樣式：
[lang|=en]
{
background-color:yellow;
}
[attribute|=value] 選擇器用于選取帶有以指定值開(kāi)頭的屬性值的元素。
注釋：該值必須是整個(gè)單詞瓤狐，比如 lang="en"瞬铸，或者后面跟著連字符，比如 lang="en-us"础锐。
選擇 lang 屬性值以 "en" 開(kāi)頭的所有元素嗓节。
(13):link 選擇器:
選擇未被訪問(wèn)的鏈接，并設(shè)置其樣式：
a:link
{
background-color:yellow;
}
:link 選擇器用于選取未被訪問(wèn)的鏈接皆警。
注釋：:link 選擇器不會(huì)設(shè)置已經(jīng)訪問(wèn)過(guò)的鏈接的樣式拦宣。
選擇所有未被訪問(wèn)的鏈接。
(14):visited 選擇器:
選擇已訪問(wèn)的鏈接信姓，并設(shè)置其樣式：
a:visited
{
background-color:yellow;
}
:visited 選擇器用于選取已被訪問(wèn)的鏈接鸵隧。
:active 選擇器:
選擇活動(dòng)鏈接，并設(shè)置其樣式：
a:active
{
background-color:yellow;
}
:active 選擇器用于選擇活動(dòng)鏈接意推。
當(dāng)您在一個(gè)鏈接上點(diǎn)擊時(shí)豆瘫，它就會(huì)成為活動(dòng)的（激活的）。
:hover 選擇器:
選擇鼠標(biāo)指針浮動(dòng)在其上的元素菊值，并設(shè)置其樣式：
a:hover
{
background-color:yellow;
}
:hover 選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素外驱。
:focus 選擇器:
選擇獲得焦點(diǎn)的輸入字段，并設(shè)置其樣式：
input:focus
{
background-color:yellow;
}
:focus 選擇器用于選取獲得焦點(diǎn)的元素腻窒。
:first-letter 選擇器:
選擇每個(gè) <p> 元素的首字母昵宇，并為其設(shè)置樣式：
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
:first-letter 選擇器用于選取指定選擇器的首字母。
:first-line 選擇器:
選擇每個(gè) <p> 元素的首行儿子，并為其設(shè)置樣式：
p:first-line
{
background-color:yellow;
}
:first-line 選擇器用于選取指定選擇器的首行瓦哎。
:first-child 選擇器:
選擇屬于其父元素的首個(gè)子元素的每個(gè) <p> 元素，并為其設(shè)置樣式：
p:first-child
{
background-color:yellow;
}
:first-child 選擇器用于選取屬于其父元素的首個(gè)子元素的指定選擇器
:before 選擇器:
在每個(gè) <p> 元素的內(nèi)容之前插入新內(nèi)容：
p:before
{
content:"哥哥：";
}
:before 選擇器在被選元素的內(nèi)容前面插入內(nèi)容典徊。
請(qǐng)使用 content 屬性來(lái)指定要插入的內(nèi)容杭煎。
:after 選擇器:
在每個(gè) <p> 元素的內(nèi)容之后插入新內(nèi)容：
p:after
{
content:"弟弟：";
}
:after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容。
請(qǐng)使用 content 屬性來(lái)指定要插入的內(nèi)容卒落。
:lang 選擇器:
選擇帶有以 "en" 開(kāi)頭的 lang 屬性值的每個(gè) <p> 元素羡铲，并設(shè)置其樣式：
p:lang(en)
{
background:yellow;
}
所有主流瀏覽器都支持 :lang 選擇器。
注釋：對(duì)于 IE8 中的 :lang儡毕，必須聲明 <!DOCTYPE>也切。
element1~element2 選擇器:
為所有相同的父元素中位于 p 元素之后的所有 ul 元素設(shè)置背景：
p~ul
{
background:#ff0000;
}
所有主流瀏覽器都支持 element1~element2 選擇器扑媚。
注釋：對(duì)于 IE8 中的該選擇器，必須聲明 <!DOCTYPE>雷恃。
[attribute^=value] 選擇器:
設(shè)置 class 屬性值以 "test" 開(kāi)頭的所有 div 元素的背景色：
div[class^="test"]
{
background:#ffff00;
}
[attribute^=value] 選擇器匹配屬性值以指定值開(kāi)頭的每個(gè)元素疆股。
[attribute$=value] 選擇器
設(shè)置 class 屬性值以 "test" 結(jié)尾的所有 div 元素的背景色：
div[class$="test"]
{
background:#ffff00;
}
[attribute$=value] 選擇器匹配屬性值以指定值結(jié)尾的每個(gè)元素。
[attribute*=value] 選擇器
設(shè)置 class 屬性值包含 "test" 的所有 div 元素的背景色：
div[class*="test"]
{
background:#ffff00;
}
[attribute*=value] 選擇器匹配屬性值包含指定值的每個(gè)元素倒槐。
:first-of-type 選擇器:
指定父元素的首個(gè) p 元素的背景色：
p:first-of-type
{
background:#ff0000;
}
:first-of-type 選擇器匹配屬于其父元素的特定類型的首個(gè)子元素的每個(gè)元素旬痹。
提示：等同于 :nth-of-type(1)。
:last-of-type 選擇器:
指定父元素的最后一個(gè) p 元素的背景色：
p:last-of-type
{
background:#ff0000;
}
:last-of-type 選擇器匹配屬于其父元素的特定類型的最后一個(gè)子元素的每個(gè)元素讨越。
提示：等同于 :nth-last-of-type(1)两残。
:only-of-type 選擇器:
指定屬于父元素的特定類型的唯一子元素的每個(gè) p 元素：
p:only-of-type
{
background:#ff0000;
}
:only-of-type 選擇器匹配屬于其父元素的特定類型的唯一子元素的每個(gè)元素。
:only-child 選擇器:
規(guī)定屬于其父元素的唯一子元素的每個(gè) p 元素：
p:only-child
{
background:#ff0000;
}
:only-child 選擇器匹配屬于其父元素的唯一子元素的每個(gè)元素
:last-child 選擇器:
指定屬于其父元素的最后一個(gè)子元素的 p 元素的背景色：
p:last-child
{
background:#ff0000;
}
:last-child 選擇器匹配屬于其父元素的最后一個(gè)子元素的每個(gè)元素把跨。
提示：p:last-child 等同于 p:nth-last-child(1)人弓。
:empty 選擇器:
指定空的 p 元素的背景色：
p:empty
{
background:#ff0000;
}
:empty 選擇器匹配沒(méi)有子元素（包括文本節(jié)點(diǎn)）的每個(gè)元素
:target 選擇器:
突出顯示活動(dòng)的 HTML 錨：
p:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
所有主流瀏覽器均支持 :target 選擇器，除了 IE8 及更早的版本着逐。
:enabled 選擇器:
為所有 type="text" 的已啟用的 input 元素設(shè)置背景色：
input[type="text"]:enabled
{
background-color: #ff0000;
}
:enabled 選擇器匹配每個(gè)已啟用的元素（大多用在表單元素上）崔赌。
:disabled 選擇器:
為所有 type="text" 的被禁用的 input 元素設(shè)置背景色：
input[type="text"]:disabled
{
background-color: #dddddd;
}
:disabled 選擇器匹配每個(gè)被禁用的元素（大多用在表單元素上）。
:checked 選擇器:
為所有被選中的 input 元素設(shè)置背景色：
input:checked
{
background-color: #ff0000;
}
:checked 選擇器匹配每個(gè)已被選中的 input 元素（只用于單選按鈕和復(fù)選框）耸别。
:not 選擇器:
設(shè)置非 <p> 元素的所有元素的背景色：
:not(p)
{
background-color: #ff0000;
}
:not(selector) 選擇器匹配非指定元素/選擇器的每個(gè)元素健芭。
::selection 選擇器:
使被選中的文本成為紅色：
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
::selection 選擇器匹配被用戶選取的選取是部分。
只能向 ::selection 選擇器應(yīng)用少量 CSS 屬性：color太雨、background吟榴、cursor 以及 outline。
