僞類選擇器
僞類選擇器有以下6種：
- 動态僞類：
- 錨點僞類
- 使用者行為僞類
- 目标僞類
- UI元素狀态僞類
- 否定僞類選擇器
- 語言僞類選擇器
- CSS3結構僞類
動态僞類
這些僞類并不存在于HTML中，隻有當使用者和網站互動的時候才能展現出來
錨點僞類 link visited hover active（一定要按照這個順序寫）
使用者行為僞類 hover active focus
目标僞類
用于命名錨記
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 600px;
font-size: 100px;
text-align: center;
line-height: 600px;
}
/* 目标添加效果 */
div:target{
background: yellowgreen;
color: yellow;
}
</style>
</head>
<body>
<p>
<a href="#box1">1</a>
<a href="#box2">2</a>
<a href="#box3">3</a>
<a href="#box4">4</a>
<a href="#box5">5</a>
</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<div id="box5">5</div>
</body>
</html>
UI元素狀态僞類
概念：
我們把“:enabled”，“:disable”，“:checked”，“:seclect"僞類稱為UI元素狀态僞類
相容性：
IE9+，FireFox、Chrome、Safari、Opera
否定選擇器（:not）
概念：
:not(Element/selector) 選中除了括号裡的其它元素
相容性：
IE9+，FireFox，Chrome，Safari，Opera
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
a {
text-decoration: none;
color: #333;
font-size: 14px;
display: block;
float: left;
width: 100px;
height: 30px;
}
nav {
width: 800px;
margin: 0 auto;
}
nav > a:not(:last-of-type) { /*除了最後一個a沒有被選中，nav下的所有a都被選中*/
border-right: 1px solid red;
}
</style>
</head>
<body>
<nav>
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a> <!-- 最後一個沒有右邊框效果 -->
</nav>
</body>
</html>
語言僞類選擇器
用來比對使用指定語言的元素
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:lang(zh-cn){
background-color: red;
}
</style>
</head>
<body>
<p lang="en"><q>Quote in English</q></p>
<p lang="zh-cn"><q>中文的引号</q></p>
</body>
</html>
CSS3結構僞類
CSS3的:nth選擇器
我們把CSS3的:nth選擇器也稱為CSS3結構類
選擇方法：
:first-child，:last-child，:nth-child()，:nth-last-chld，nth-of-type()，:nth-last-of-type()，:first-of-type()，:last-of-type，:only-child，:only-of-type，:empty
Element:first-child
概念：
選擇第一個元素
相容性：
IE8+，FireFox、Chrome、Safari、Opera
Element:last-child
概念：
選擇最後一個元素
相容性：
IE8+，FireFox、Chrome、Safari、Opera
Element:nth-child()
概念：
選擇确切的位置上的元素，nth-child(1)等于first-child
相容性：
IE9+，FireFox4+，Chrome，Safari，Opera
關于參數（n）
nth-child(n)選取每一行
n:所有的行
2n:每2行選擇一行
3n:每3行選擇一行
n+2:除第1行外所有的行
2n+4:從第4行開始隔1行選擇1行
:nth-last-child(n) 從後向前選擇,n為參數
n:所有行
2:倒數第2行
-n+3:最後3行
:only-child隻有一個元素時使用
Element:nth-last-child(N)
概念：
比對屬于其元素的第N個子元素的每個元素，不論元素的類型，從最後一個子元素開始計數
相容性：
IE9+，FireFox4+，Chrome，Safari，Opera
Element:nth-of-type(N)
概念：
:nth-of-type(N)選擇比對屬于父元素的特定類型的第N個子元素的每個元素
相容性：
IE9+，FireFox4+，Chrome，Safari，Opera
Element:nth-last-of-type(N)
概念：
比對屬于父元素的特定類型的第N個子元素的每個元素，從最後一個子元素開始計數
相容性：
IE9+，FireFox4+，Chrome，Safari，Opera
Element:first-of-type
概念：
:first-of-type選擇器比對屬于其父元素的特定的首個子元素的每個元素
相容性：
IE9+，FireFox4+，Chrome，Safari，Opera
Element:last-of-type
概念：
:last-of-type選擇器比對屬于其父元素的特定的首個子元素的每個元素
相容性：
IE9+，FireFox4+，Chrome，Safari，Opera
Element:only-child
概念：
:only-child選擇器比對屬于其父元素的唯一子元素的每個元素
相容性：
IE9+，FireFox，Chrome，Safari，Opera
Element:only-of-type
概念：
:only-of-type選擇器比對屬于其父元素的特定類型的唯一子元素的每個元素
相容性：
IE9+，FireFox4+，Chrome，Safari，Opera
Element:empty
概念：
:empty選擇器比對沒有子元素（包括文本節點）的每個元素
相容性：
IE9+，FireFox，Chrome，Safari，Opera
僞元素
CSS僞元素用于向某些選擇器設定特殊效果
文法格式：
元素::僞元素 (Element::pseudo-element)
相容性：
IE9+，FireFox，Chrome，Safari，Opera
Element::first-line
概念：
根據“first-line”僞元素中的樣式對Element元素的第一行文本進行格式化
說明：
“first-line”僞元素隻能用于塊級元素
Element::first-letter
概念：
用于向文本的首字母設定特殊樣式
說明：
“first-letter”僞元素隻能用于塊級元素
Element::before
概念：
在元素的内容前面插入新的内容
說明：
常用“content”配合使用
Element::after
概念：
在元素的内容後面插入新内容
說明：
常用“content”配合使用，多用于清除浮動
Element::selection
概念：
用于設定在浏覽器選中文本後的背景色和前景色
相容性說明：
::selection在IE家族中，隻有IE9+版本支援，在Firefox中需要加上其字首“-moz”
僞類選擇器和僞元素選擇器的差別
css僞類：狀态僞類基于元素目前狀态進行選擇的。結構僞類利用dom樹進行元素過濾，通過文檔結構的互相關系來比對元素。
css僞元素：對元素中的特定内容進行操作，而不是描述狀态。
css3為了區分兩者僞類使用單冒号，僞元素使用雙冒号，但因為相容問題現在大部分還是用單冒号。
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)