CSS3選擇器規範地址css
CSS3選擇最新選擇器規範css3
選擇器 + 聲明塊瀏覽器
選擇器 從右往左 解析bash
/*通配符選擇器*/ * {}
/*元素選擇器*/ body {}
/*類選擇器*/ .list {}
/*ID選擇器*/ #list {}
複製代碼
/*後代選擇器*/ .list li {}
會選中全部符合條件的後代,包括兒子,孫子,孫子的孫子...
/*子元素選擇器*/ #wrap > .inner {}
也可稱爲直接後代選擇器,此類選擇器只能匹配到直接後代,不能匹配到深層次的後代元素
/*相鄰兄弟選擇器*/ #wrap #first + .inner {}
它只會匹配緊跟着的兄弟元素
/*通用兄弟選擇器*/ #wrap #first ~ div {}
它會匹配全部的兄弟元素(不須要緊跟)
/*選擇器分組*/ h1,h2,h3{}
逗號,稱之爲結合符
複製代碼
/*存在和值屬性選擇器*/
[attr]:該選擇器選擇包含 attr 屬性的全部元素,不論 attr 的值爲什麼。
[attr=val]:該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
[attr~=val]:表示帶有以 attr 命名的屬性的元素,而且該屬性是一個以空格做爲分隔的值列表,其中至少一個值爲val。
/*子串值屬性選擇器*/
[attr|=val] : 選擇attr屬性的值是val(包括val)或以val-開頭的元素。
[attr^=val] : 選擇attr屬性的值以val開頭(包括val)的元素。
[attr$=val] : 選擇attr屬性的值以val結尾(包括val)的元素。
[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。
複製代碼
E:link 表示做爲超連接,並指向一個未訪問的地址的全部錨
E:visited 表示做爲超連接,並指向一個已訪問的地址的全部錨
E:target 表明一個特殊的元素,它的id是URI的片斷標識符
複製代碼
注意:hover
,:active
基本能夠做用於全部的元素!字體
E:hover 表示懸浮到元素上
E:active 表示匹配被用戶激活的元素(點擊按住時)
複製代碼
順序爲:link,:visited,:hover,:active
(因爲a標籤的:link
和:visited
能夠覆蓋了全部a
標籤的狀態)ui
:visited
選擇器:只有下列的屬性才能被應用到已訪問連接:
color
background-color
border-color
E:enabled 匹配可編輯的表單
E:disable 匹配被禁用的表單
E:checked 匹配被選中的表單
E:focus 匹配獲焦的表單
複製代碼
#wrap E:nth-child(index) //匹配wrap中的第index的子元素,這個子元素必須是E
#wrap E:nth-of-type(index) //匹配wrap中同類型的第index個的E元素
複製代碼
index
的值從1開始計數!!!!index
能夠爲變量n
(只能是n
)或者公式:nth-child(length) /*參數是具體數字 length爲整數*/
:nth-child(n) /*參數是n,n從0開始計算*/
:nth-child(n*length) /*n的倍數選擇,n從0開始算*/
:nth-child(n*length+1) /*表示隔幾選一*/
:nth-child(2n) / :nth-child(even) /*表示偶數*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇數*/
複製代碼
:nth-child
和:nth-of-type
有一個很重要的區別!!
nth-of-type
以元素爲中心!!!:nth-child(index)系列
E:first-child 匹配父元素的第一個子元素E
E:last-child 匹配父元素的最後一個子元素E
E:nth-last-child(index) 匹配父元素的倒數第n個子元素E
E:only-child 匹配父元素僅有的一個子元素E
:nth-of-type(index)系列
E:first-of-type 匹配同類型中的第一個同級兄弟元素E
E:last-of-type 匹配同類型中的最後一個同級兄弟元素E
E:nth-last-type(index) 匹配同類型中的倒數第n個同級兄弟元素E
E:only-of-type 匹配同類型中的惟一的一個同級兄弟元素E
複製代碼
假定有個列表,每一個列表項都有一條底邊線,可是最後一項不須要底邊線。spa
li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
複製代碼
區分空元素代理
:empty(內容必須是空的,有空格都不行,有attr不要緊)
複製代碼
選擇不包含子元素的div
元素:code
div:empty
複製代碼
E::after //在目標元素E的前面插入的內容。用來和content屬性一塊兒使用
E::before //在目標元素E的後面插入的內容。用來和content屬性一塊兒使用
E::firstLetter //設置元素內的第一個字符的樣式
E::firstLine //設置元素內的第一行的樣式
E::selection //設置元素被選擇時的字體顏色和背景顏色EE::placeholder //設置元素文字佔位符的樣式。(通常用於input輸入框)
複製代碼
::placeholder
在使用時須要加上各個瀏覽器的前綴;除了Firefox是 ::[prefix]placeholder
,其餘瀏覽器都是使用 ::[prefix]input-placeholder
。排序
!important
> 行內樣式 > #id
> .class
/僞類/屬性> tag
> *
> 繼承 > 默認
內聯聲明 1,0,0,0
ID屬性值 0,1,0,0
類屬性/屬性/僞類 0,0,1,0
元素/僞元素 0,0,0,1
通配符選擇器 0,0,0,0
結合符對選擇器特殊性沒有一點貢獻
繼承沒有特殊性
複製代碼
重要聲明
!important
老是要放在聲明的最後,即分號的前面來源
css樣式的來源大體有三種
創做人員
讀者
用戶代理
複製代碼
讀者的重要聲明
創做人員的重要聲明
創做人員的正常聲明
讀者的正常聲明
用戶代理的聲明
複製代碼
1.找出全部相關的規則,這些規則都包含一個選擇器
2.計算聲明的優先級
先按來源排序
在按選擇器的特殊性排序
最終按順序
複製代碼