派生選擇器
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
li strong {
font-style: italic;
font-weight: normal;
}
li下面的strong會有後面的屬性
id選擇器
id 選擇器以 "#" 來定義。
下面的兩個 id 選擇器，第一個可以定義元素的顏色爲紅色，第二個定義元素的顏色爲綠色：
red {color:red;}
green {color:green;}
在現代佈局中，id 選擇器常常用於建立派生選擇器。
sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
即使被標註爲 sidebar 的元素只能在文檔中出現一次，這個 id 選擇器作爲派生選擇器也可以被使用很多次：
sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
類選擇器
類選擇器以一個點號顯示：
.center {text-align: center}
和 id 一樣，class 也可被用作派生選擇器：
.fancy td {
color: #f60;
background: #666;
}
元素也可以基於它們的類而被選擇：
td.fancy {
color: #f60;
background: #666;
}
class 爲 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註爲 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註爲 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）
下面的例子爲帶有 title 屬性的所有元素設置樣式：
[title]
{
color:red;
}
爲 title="W3School" 的所有元素設置樣式：
[title=W3School]
{
border:5px solid blue;
}
爲包含指定值的 title 屬性的所有元素設置樣式。適用於由空格分隔的屬性值：
[title~=hello] { color:red; }
屬性選擇器在爲不帶有 class 或 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;
}
鏈接的四種狀態：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位於鏈接的上方
a:active - 鏈接被點擊的時刻
實例
a:link {color:#FF0000;} /* 未被訪問的鏈接 /
a:visited {color:#00FF00;} / 已被訪問的鏈接 /
a:hover {color:#FF00FF;} / 鼠標指針移動到鏈接上 /
a:active {color:#0000FF;} / 正在被點擊的鏈接 */
當爲鏈接的不同狀態設置樣式時，請按照以下次序規則：
a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後
CSS 定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱爲行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
z-index結合定位，將元素放置在另一元素之前或之後
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head>
<body>
<h1>這是一個標題</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默認的 z-index 是 0。Z-index 1 擁有更高的優先級。</p>
</body>
</html>
相對定位
在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
box_relative {
position: relative;
left: 30px;
top: 20px;
}
絕對定位
絕對定位使元素的位置與文檔流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因爲元素的位置相對於它在普通流中的位置。
box_relative {
position: absolute;
left: 30px;
top: 20px;
}
相對定位是“相對於”元素在文檔中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。
因爲絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
CSS 元素選擇器
最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。
如果設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
在 W3C 標準中，元素選擇器又稱爲類型選擇器（type selector）。
“類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。”
選擇器分組
假設希望 h2 元素和段落都有灰色。爲達到這個目的，最容易的做法是使用以下聲明：
h2, p {color:gray;}
通配符選擇器
CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示爲一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。
例如，下面的規則可以使文檔中的每個元素都爲紅色：
- {color:red;}
聲明分組
我們既可以對選擇器進行分組，也可以對聲明分組。
h1 {font: 28px Verdana; color: white; background: black;}
類選擇器
.important {color:red;}
結合元素
p.important {color:red;}
CSS 多類選擇器
<p class="important warning">
This paragraph is a very important warning.
</p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
CSS ID 選擇器
intro {font-weight:bold;}
類選擇器還是 ID 選擇器？
在類選擇器這一章中我們曾講解過，可以爲任意多個元素指定類。前一章中類名 important 被應用到 p 和 h1 元素，而且它還可以應用到更多元素。
區別 1：只能在文檔中使用一次
與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。
區別 2：不能使用 ID 詞列表
不同於類選擇器，ID 選擇器不能結合使用，因爲 ID 屬性不允許有以空格分隔的詞列表。
區別 3：ID 能包含更多含義
類似於類，可以獨立於元素來選擇 ID。
CSS 2 引入了屬性選擇器。
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
把包含標題（title）的所有元素變爲紅色，可以寫作：
*[title] {color:red;}
只對有 href 屬性的錨（a 元素）應用樣式：
a[href] {color:red;}
可以根據多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可。
例如，爲了將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置爲紅色，可以這樣寫：
a[href][title] {color:red;}
子串匹配屬性選擇器
類型 描述
[abc^="def"] 選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"] 選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素
如果希望對指向 W3School 的所有鏈接應用樣式，不必爲所有這些鏈接指定 class，再根據這個類編寫樣式，而只需編寫以下規則：
a[href*="w3school.com.cn"] {color: red;}
特定屬性選擇器
*[lang|="en"] {color: red;}
上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。因此，以下示例標記中的前三個元素將被選中，而不會選擇後兩個元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
CSS 選擇器參考手冊
選擇器 描述
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。
後代選擇器（descendant selector）又稱爲包含選擇器。
後代選擇器可以選擇作爲某元素後代的元素。
根據上下文選擇元素
只對 h1 元素中的 em 元素應用樣式，可以這樣寫：
h1 em {color:red;}
有關後代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。
子元素選擇器
不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）
選擇只作爲 h1 元素子元素的 strong 元素，可以這樣寫：
h1 > strong {color:red;}
相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}
相鄰兄弟結合符還可以結合其他結合符：
html > body table + ul {margin-top:20px;}
這個選擇器解釋爲：選擇緊接在 table 元素後出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中，body 元素本身是 html 元素的子元素。
錨僞類
在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。
a:link {color: #FF0000} /* 未訪問的鏈接 /
a:visited {color: #00FF00} / 已訪問的鏈接 /
a:hover {color: #FF00FF} / 鼠標移動到鏈接上 /
a:active {color: #0000FF} / 選定的鏈接 */