-
選擇器：
CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精准度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容
- 一 屬性選擇器：
a) E[attribute] 表示存在attr屬性即可；
div[class]
b) E[attr=val] 表示屬性值完全等於val；
div[class=mydemo]
c) E[attr*=val] 表示的屬性值里包含val字符並且在“任意”位置；
div[class*=mydemo]
d) E[attr^=val] 表示的屬性值里包含val字符並且在“開始”位置；
div[class^=mydemo]
e) E[attr$=val] 表示的屬性值里包含val字符並且在“結束”位置；
div[class$=demos]
-
二偽類選擇器-偽元素選擇器：
a) 之前學習的：a:hover a:link a:active a:visited
b) 以某元素相對於其父元素或兄弟元素的位置來獲取無素的結構偽類
f) E:first-child:查找E這個元素的父元素的第一個子元素E
g) E:last-child:最后一個子元素
h) E:nth-child(n): 第n個子元素，計算方法是E元素的全部兄弟元素
i) E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着計算
j) E:nth-child(even): 所有的偶數
k) E:nth-child(odd): 所有的奇數
l) E:nth-of-type(n):指定類型
m) E:empty 選中沒有任何子節點的E元素，注意，空格也算子元素
n) E:target 結合錨點進行使用，處於當前錨點的元素會被選中
- o) 重點說明：n遵循線性變化，其取值0、1、2、3、4、... 但是當n<=0時，選取無效
p) 案例代碼：
/*第一個li元素*/
li:first-child{
color: red;
}
/*最后一個元素*/
li:last-child{
color: green;
}
/*獲取第10個元素*/
li:nth-child(10){
color: orange;
}
/*獲取倒數第3個li元素*/
li:nth-last-child(3){
color: purple;
}
/*獲取索引順序為6的倍數的li元素*/
li:nth-child(6n){
text-decoration: underline;
border: 1px solid red;
}
/*獲取所有索引為偶數的li元素*/
li:nth-child(even){
border: 1px solid black;
}
/*獲取前5個li元素*/
li:nth-child(-n+5){
background-color: #ddd;
} -
/*獲取除了第一個外的元素*/
li:nth-child(n+2){
}c) n可是多種形式：nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等
三偽元素選擇器：
a) 重點：E::before、E::after
i. 是一個行內元素，需要轉換成塊:display:block float:** position:
ii. 必須添加content,哪怕不設置內容，也需要content:””
iii. E:after、E:before 在舊版本里是偽類，在新版本里是偽元素，新版本下E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理
iv. E::before: 定義在一個元素的內容之前插入content屬性定義的內容與樣式
v. E::after: 定義在一個元素的內容之后插入content屬性定義的內容與樣式
vi. 注意：
- IE6、IE7與IE8（怪異模式Quirks mode）不支持此偽元素
- CSS2中 E:before或者E:after，是屬於偽類的，並且沒有偽元素的概念，CSS3中 提出偽元素的概念 E::before和E::after，並且歸屬到了偽元素當中，偽類里就不再存在E:before或者 E:after偽類
b) E::first-letter文本的第一個字母或字(不是詞組)
c) E::first-line 文本第一行
d) E::selection 可改變選中文本的樣式