選擇器
CSS 選擇器用于“查找”（或選取）要設(shè)置樣式的 HTML 元素霸饲。
我們可以將 CSS 選擇器分為五類：
1.簡(jiǎn)單選擇器（根據(jù)名稱厚脉、id胶惰、類來(lái)選取元素）
2.組合器選擇器（根據(jù)它們之間的特定關(guān)系來(lái)選取元素）
3.偽類選擇器（根據(jù)特定狀態(tài)選取元素）
4.偽元素選擇器（選取元素的一部分并設(shè)置其樣式）
5.屬性選擇器（根據(jù)屬性或?qū)傩灾祦?lái)選取元素
1.簡(jiǎn)單選擇器
CSS 元素選擇器
元素選擇器根據(jù)元素名稱來(lái)選擇 HTML 元素孵滞。
p {
text-align: center;
color: red;
}
id 選擇器
id 選擇器使用 HTML 元素的 id 屬性來(lái)選擇特定元素。
元素的 id 在頁(yè)面中是唯一的泄伪，因此 id 選擇器用于選擇一個(gè)唯一的元素蟋滴！
要選擇具有特定 id 的元素根蟹，請(qǐng)寫一個(gè)井號(hào)（＃）简逮，后跟該元素的 id。
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受樣式的影響蕉堰。</p>
</body>
</html>
類選擇器
類選擇器選擇有特定 class 屬性的 HTML 元素屋讶。如需選擇擁有特定 class 的元素须教，請(qǐng)寫一個(gè)句點(diǎn)（.）字符，后面跟類名乐疆。
HTML 元素也可以引用多個(gè)類划乖。
<p class="center large">這個(gè)段落引用兩個(gè)類。</p>
.center {
text-align: center;
color: red;
}
.large {
text-align: center;
color: red;
}
通用選擇器
通用選擇器（*）選擇頁(yè)面上的所有的 HTML 元素挤土。
分組選擇器
分組選擇器選取所有具有相同樣式定義的 HTML 元素琴庵。
h1, h2, p {
text-align: center;
color: red;
}
2.組合器
組合器是解釋選擇器之間關(guān)系的某種機(jī)制。
CSS 選擇器可以包含多個(gè)簡(jiǎn)單選擇器仰美。在簡(jiǎn)單選擇器之間迷殿，我們可以包含一個(gè)組合器。
CSS 中有四種不同的組合器：
后代選擇器 (空格)
子選擇器 (>)
相鄰兄弟選擇器 (+)
通用兄弟選擇器 (~)
后代選擇器
div p {
background-color: yellow;
}
子選擇器
div > p {
background-color: yellow;
}
相鄰兄弟選擇器
相鄰兄弟選擇器匹配所有作為指定元素的相鄰?fù)?jí)的元素咖杂。指定元素后面得一個(gè)
兄弟（同級(jí)）元素必須具有相同的父元素庆寺，“相鄰”的意思是“緊隨其后”翰苫。
下面的例子選擇緊隨 <div> 元素之后的所有 <p> 元素：
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>相鄰兄弟選擇器</h1>
<p>相鄰的同胞選擇器（+）選擇所有作為指定元素的相鄰的同級(jí)元素止邮。</p>
<div>
<p>div 中的段落 1这橙。</p>
<p>div 中的段落 2奏窑。</p>
</div>
<p>段落 3。不在 div 中屈扎。</p>
<p>段落 4埃唯。不在 div 中。</p>
</body>
</html>
通用兄弟選擇器
通用兄弟選擇器匹配屬于指定元素后面的同級(jí)元素的所有元素鹰晨。
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>通用兄弟選擇器</h1>
<p>通用的兄弟選擇器（~）選擇指定元素的所有同級(jí)元素墨叛。</p>
<p>段落 1。</p>
<div>
<p>段落 2模蜡。</p>
</div>
<p>段落 3漠趁。</p>
<code>一些代碼。</code>
<p>段落 4忍疾。</p>
</body>
</html>
3.偽類
偽類用于定義元素的特殊狀態(tài)闯传。
例如，它可以用于：
設(shè)置鼠標(biāo)懸停在元素上時(shí)的樣式
為已訪問和未訪問鏈接設(shè)置不同的樣式
設(shè)置元素獲得焦點(diǎn)時(shí)的樣式
a:hover 必須在 CSS 定義中的 a:link 和 a:visited 之后卤妒，才能生效甥绿！a:active 必須在 CSS 定義中的 a:hover 之后才能生效！偽類名稱對(duì)大小寫不敏感则披。
偽類和 CSS 類
偽類可以與 CSS 類結(jié)合使用：
當(dāng)您將鼠標(biāo)懸停在例子中的鏈接上時(shí)共缕，它會(huì)改變顏色：
a.highlight:hover {
color: #ff0000;
}
簡(jiǎn)單的工具提示懸停
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
:first-child 偽類
:first-child 偽類與指定的元素匹配：該元素是另一個(gè)元素的第一個(gè)子元素。
匹配首個(gè) <p> 元素
p:first-child {
color: blue;
}
:lang 偽類
:lang 偽類允許您為不同的語(yǔ)言定義特殊的規(guī)則士复。
<html>
<head>
<style>
q:lang(en) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
4.偽元素
CSS 偽元素用于設(shè)置元素指定部分的樣式图谷。
設(shè)置元素的首字母、首行的樣式
在元素的內(nèi)容之前或之后插入內(nèi)容
::first-line
::first-line 偽元素用于向文本的首行添加特殊樣式。 偽元素只能應(yīng)用于塊級(jí)元素便贵。
- 字體屬性
- 顏色屬性
- 背景屬性
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
在 CSS3 中隅茎，雙冒號(hào)取代了偽元素的單冒號(hào)表示法。這是 W3C 試圖區(qū)分偽類和偽元素的嘗試嫉沽。
在 CSS2 和 CSS1 中辟犀，偽類和偽元素都使用了單冒號(hào)語(yǔ)法。
為了向后兼容绸硕，CSS2 和 CSS1 偽元素可接受單冒號(hào)語(yǔ)法堂竟。
::first-letter 偽元素
::first-letter 偽元素用于向文本的首字母添加特殊樣式。
偽元素可以與 CSS 類結(jié)合使用
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">這是一段簡(jiǎn)介玻佩！</p>
<p>這是一段文字出嘹。以及更多的文字。</p>
</body>
</html>
::before 偽元素 ::after 偽元素
::before 偽元素可用于在元素內(nèi)容之前插入一些內(nèi)容咬崔。
::after 偽元素可用于在元素內(nèi)容之后插入一些內(nèi)容税稼。
h1::before {
content: url(smiley.gif);
}
h1::after {
content: url(smiley.gif);
}
::selection 偽元素
::selection 偽元素匹配用戶選擇的元素部分。
以下 CSS 屬性可以應(yīng)用于 ::selection：
color
background
cursor
outline
5.屬性選擇器
為帶有特定屬性的 HTML 元素設(shè)置樣式
我們可以設(shè)置帶有特定屬性或?qū)傩灾档?HTML 元素的樣式垮斯。
CSS [attribute] 選擇器
[attribute] 選擇器用于選取帶有指定屬性的元素郎仆。
CSS [attribute="value"] 選擇器
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] 選擇器
[attribute~="value"] 選擇器選取屬性值包含指定詞的元素。
下例選取 title 屬性包含 "flower" 單詞的所有元素：
[title~="flower"] {
border: 5px solid yellow;
}
CSS [attribute|="value"] 選擇器
[attribute|="value"] 選擇器用于選取指定屬性以指定值開頭的元素兜蠕。
下例選取 class 屬性以 "top" 開頭的所有元素：
注釋：值必須是完整或單獨(dú)的單詞扰肌，比如 class="top" 或者后跟連字符的，比如 class="top-text"熊杨。
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] 選擇器
[attribute^="value"] 選擇器用于選取指定屬性以指定值開頭的元素曙旭。下例選取 class 屬性以 "top" 開頭的所有元素：提示：值不必是完整單詞！
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] 選擇器
[attribute$="value"] 選擇器用于選取指定屬性以指定值結(jié)尾的元素晶府。
下例選取 class 屬性以 "test" 結(jié)尾的所有元素：
提示：值不必是完整單詞桂躏！
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] 選擇器
[attribute*="value"] 選擇器選取屬性值包含指定詞的元素。
下例選取 class 屬性包含 "te" 的所有元素：
提示：值不必是完整單詞
[class*="te"] {
background: yellow;
}
設(shè)置表單樣式
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=button] {
width: 120px;
margin-left: 315px;
display: block;
}
</style>
</head>
<body>
<h1>添加表單樣式</h1>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Bill" size="20">
Lastname:<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
