給連結定義樣式
a:link 表示尚未訪問的連結，滑鼠未划過和點擊
a:visited 表示已經訪問的連結
a:hover 表示滑鼠劃入的連結
a:active 表示啟用的連結，也就是滑鼠點選連結的一瞬間
注意上面這四個連結的偽類在使用的時候要有一定的順序，即上面列舉的順序，否則看不到效果。可以簡單記為LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。
給段落定義樣式
:first-letter 為一行中的第一個字元建立樣式
:first-line 為一段中第一行建立樣式
更多偽類和虛擬元素
:before 可以在指定元素的前面新增內容。比如有一個段落p，你要在前面添加"Hello",可以用偽類表示為p:before {content: "Hello";}
:after 和:before一樣，只不過實在元素的後面新增內容。
但是IE6， IE7不支援content屬性。
:first-child 選取其他元素的第一個子項目，這裡容易引起混淆。比如有下面的一段代碼：
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<p>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</p>
那麼，li:frist-child將會選取所有ul標籤下的第一個li標籤，也就是上面兩個內容為第一行的li標籤，而不是選擇li標籤的第一個子項目
:focus 這個虛擬元素與連結的:hover相似，只不過:hover為連結專用，而這個可以用於其他的元素，表示當元素獲得焦點時應有的樣式
進階選取器
子選取器
">"可用來作為子選取器。當要選取一個元素的子項目時，可以使用這個符號。比如有下面一段代碼：
<p>
<ul>
<li>第一級</li>
<li>
<ul>
<li>第二級</li>
</ul>
</li>
</ul>
</p>
p>ul 只會選擇第一個ul標籤，而不會選擇第二個ul標籤，因為它不是p標籤的子項目，而是li標籤的子項目。如果要達到選擇這兩個ul標籤，可以是p ul。這樣p標籤下面所有的ul標籤都會被選中。這種形式選取的是p標籤下面的所有子孫元素。
同胞選取器
"+"可用來作為同胞選取器。在HTML中，緊挨另一個標籤出現的標籤被稱為鄰近同胞標籤，如：
<body>
<h1>標題</h1>
<p>段落</p>
</body>
p標籤緊鄰h1標籤，因此p標籤為h1的同胞標籤，可以通過h1+p來選擇。
屬性選取器
在屬性選取器中，用[]包含要選擇的屬性，如：
img[title]
那麼，所有帶有title屬性的img標籤都會被選中，而那些沒帶title標籤的img則不會被選中。[]括弧前面可以使任何有效選取器。
屬性選取器中的屬性還可以帶有值。比如許多表單元素的形式都一樣，如<input type = "text" />和<input type = "checkbox" />,那麼input[type = "text"]可以讓你只選中文字框。
其他的一些屬性選取器還有：
^= 讓你匹配屬性"以...開始"的標籤，如:a[href^= "http://"]則匹配所有以http://開頭的連結。
$= 讓你匹配屬性"以...結束"的標籤，如:a[href$=".com"]則匹配所有以".com"結尾的連結。
*= 讓你匹配屬性包含某一值的標籤，如:a[href*= "renren"]則匹配href中包含"renren"的所有連結。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
