CSS選擇器
- 1)標簽選擇器(標簽)
語法： 元素名稱{屬性：屬性值抽米；...}
span{ /* 選擇所有的span標簽*/
padding:10px;
background:cyan;
}
- 2）id選擇器（#）
語法： #id名{屬性：屬性值膨报；...}
#text{ /* 選擇id="text"的標簽*/
width: 300px;
height: 50px;
line-height: 50px;
margin: 15px 0px;
text-align: center;
background: hotpink;
}
- 3）class選擇器（.）
語法： .class名{屬性：屬性值巴比；...}
.box1{ /* 選擇class="box1"的元素*/
background: pink;
}
- 4）交集選擇器
用于選擇同時具有多個選擇器匹配的元素
div.box2{ /* 選擇div并且class="box2"的元素*/
background: yellow;
}
- 5）并集選擇器（群組選擇器）（,）
語法： 選擇器1,選擇器2,選擇器3{屬性：屬性值塔沃；...}
h3,.list{ /* 選擇h3以及class="list"的元素*/
border: 1px solid blue;
}
- 6）后代選擇器(包含選擇器)（用空格隔開）
語法： 父標簽 子標簽{屬性：屬性值；...}
.box p a{ /* 選擇.box后代中包含p的并且p下面包含a的*/
color:orange;
font-weight: bold;
}
- 7）子元素選擇器(>)
語法： 父標簽>子標簽{屬性：屬性值单起；...}
.box>p>a{ /* 選擇.box直級孩子為p并且p直級孩子是a的*/
color:green;
}
- 8）屬性選擇器
語法：
E[attr] //用于選取帶有指定屬性的元素
E[attr = value]//用于選取帶有指定屬性值的元素
E[attr ~= value]//用于選取屬性值中包含指定詞匯的元素
E[attr |= value]//用于選取帶有指定值value-開頭的或者值為value的元素
E[attr ^= value] //用于選取屬性值以value開頭的元素
E[attr $= value] //用于選取屬性值以value結尾的元素
E[attr *= value] //用于選取屬性值中包含value的元素
-
9）結構偽類選擇器
1抱怔、偽類選擇器
類選擇器和偽類選擇器的區(qū)別在于，類選擇器我們可以隨意起名嘀倒，
而偽類選擇器是CSS中已經定義好的選擇器屈留，不可以隨意起名。最常見的偽類選擇器 a:link{ color: #ff6600 } /* 未被訪問的鏈接 */ a:visited{ color: #87b291 } /* 已被訪問的鏈接 */ a:hover{ color: #6535b2 } /* 鼠標指針移動到鏈接上 */ a:active{ color: #55b28e } /* 正在被點擊的鏈接 */2测蘑、偽元素選擇器
在CSS中绕沈，主要有四個偽元素選擇器。
* first-line偽元素選擇器
用于向某個元素中的第一行文字使用樣式帮寻。
* first-letter偽元素選擇器
用于向某個元素中的文字的首字母（歐美文字）或第一個字（中文或者是日文等漢字）使用樣式乍狐。
* before偽元素選擇器
用于在某個元素之前插入一些內容。
* after偽元素選擇器
用于在某個元素之后插入內容固逗。3浅蚪、結構性偽類選擇器root、not烫罩、empty和target
結構性偽類選擇器
* root選擇器
將樣式綁定到頁面的根元素中惜傲。
* not選擇器
想對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素贝攒，讓它不使用這個樣式時盗誊，我們就可以使用not選擇器。
* empty選擇器
指定當元素中內容為空白時使用的樣式。
* target選擇器
對頁面中某個target元素指定樣式哈踱，該樣式只在用戶點擊了頁面中的超鏈接荒适，并且跳轉到target元素后起作用。4开镣、選擇器first-child刀诬、last-child、nth-child邪财、nth-last-child陕壹、only-child
- E:first-child選擇器
E:first-child單獨指定第一個子元素的的樣式。 - E:last-child選擇器
E:last-child單獨指定最后一個子元素的的樣式树埠。 - E:nth-child選擇器
E:nth-child(n) 選擇器匹配正數(shù)下來第 N 個子元素
E:nth-child(odd)選擇器匹配正數(shù)下來第奇數(shù)個子元素
E:nth-child(even)選擇器匹配正數(shù)下來第偶數(shù)個子元素 - E:nth-last-child選擇器
E:nth-last-child(n) 選擇器匹配倒數(shù)數(shù)下來第 N 個子元素
E:nth-last-child(odd)選擇器匹配倒數(shù)數(shù)下來第奇數(shù)個子元素
E:nth-last-child(even)選擇器匹配倒數(shù)下來第偶數(shù)個子元素 - E:only-child選擇器糠馆，只對唯一的子元素起作用
- E:first-of-type 找第一個同類型的
- E:last-of-type 找最后一個同類型的
- E:nth-of-type選擇器
E:nth-of-type(n) 選擇器所在父元素中同類型第n個位置匹配的子元素
E:nth-of-type(odd)選擇器所在父元素中同類型奇數(shù)位置匹配的子元素
E:nth-of-type(even)選擇器所在父元素中同類型偶數(shù)位置匹配的子元素 - E:nth-last-of-type選擇器
E:nth-last-of-type(n) 選擇器所在父元素中同類型倒數(shù)第n個位置匹配的子元素
E:nth-last-of-type(odd)選擇器所在父元素中同類型倒數(shù)奇數(shù)位置匹配的子元素
E:nth-last-of-type(even)選擇器所在父元素中同類型倒數(shù)偶數(shù)位置匹配的子元素 - E:only-of-type 選擇父元素只包含一個類型子元素的元素
- E:first-child選擇器
10）UI狀態(tài)偽類選擇器
所謂UI選擇器：就是指定的樣式只有當元素處于某種狀態(tài)下時，才起作用怎憋，在默認狀態(tài)下不起作用榨惠！
- E:hover選擇器被用來指定當鼠標指針移動到元素上時元素所使用的樣式
- E:active選擇器被用來指定元素被激活時使用的樣式
- E:focus選擇器被用來指定元素獲得光標聚焦點使用的樣式，主要是在文本框控件獲得聚焦點并進行文字輸入時使用盛霎。
- E:enabled選擇器被用來指定當元素處于可用狀態(tài)時的樣式。
- E:disabled選擇器被用來指定當元素處于不可用狀態(tài)時的樣式耽装。
- E:read-only選擇器被用來指定當元素處于只讀狀態(tài)時的樣式愤炸。
- E:read-write選擇器被用來指定當元素處于非只讀狀態(tài)時的樣式。
- E:cehcked偽類選擇器用來指定當表單中的radio單選框或者是checkbox復選框處于選取狀態(tài)時的樣式掉奄。
- E:default選擇器用來指定當頁面打開時默認處于選取狀態(tài)的單選框或復選框的控件的樣式规个。
- E:indeterminate選擇器用來指定當頁面打開時，一組單選框中沒有任何一個單選框被設定為選中狀態(tài)時姓建，整組單選框的樣式诞仓。
- E:selection偽類選擇器用來指定當元素處于選中狀態(tài)時的樣式。
- E:invalid偽類選擇器用來指定速兔，當元素內容不能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容不符合元素規(guī)定的格式時的樣式墅拭。
- E:valid偽類選擇器用來指定，當元素內容能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容符合元素規(guī)定的格式時的樣式涣狗。
- E:required偽類選擇器用來指定允許使用required屬性谍婉，而且已經指定了required屬性的input元素、select元素以及textarea元素的樣式镀钓。
- E:optional偽類選擇器用來指定允許使用required屬性穗熬，而且未指定了required屬性的input元素、select元素以及textarea元素的樣式丁溅。
- E:in-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內唤蔗，且實際的輸入值在該范圍之內時的樣式。
- E:out-of-range偽類選擇器用來指定當元素的有效值被限定在一段范圍之內，但實際輸入值在超過時使用的樣式妓柜。
-
11）兄弟選擇器
通用兄弟元素選擇器：它是用來指定位于同一個父元素之中的某個元素之后的所有其他某個種類的兄弟元素所使用的樣式箱季。
語法：
<子元素>~<子元素之后的同級兄弟元素>{
CSS樣式
}相鄰兄弟選擇器：只選取該元素相鄰的兄弟選擇器
語法：
<子元素>+<子元素之后的同級兄弟元素>{
CSS樣式
} -
12）通配符選擇器(全局選擇器)（*）
*{ padding:0; margin:0; } div *{ background"pink; }
CSS選擇器優(yōu)先級
CSS優(yōu)先級：是由四個級別和各級別的出現(xiàn)次數(shù)決定的。
四個級別分別為：行內選擇符领虹、ID選擇符规哪、類別選擇符、元素選擇符塌衰。
優(yōu)先級的算法：
每個規(guī)則對應一個初始"四位數(shù)"：0诉稍、0、0最疆、0
若是 行內選擇符杯巨，則加1、0努酸、0服爷、0
若是 ID選擇符，則加0获诈、1仍源、0、0
若是 類選擇符/屬性選擇符/偽類選擇符舔涎，則分別加0笼踩、0、1亡嫌、0
若是 元素選擇符/偽元素選擇符嚎于，則分別加0、0挟冠、0于购、1
算法：將每條規(guī)則中，選擇符對應的數(shù)相加后得到的四位數(shù)知染，從左到右進行比較肋僧，大的優(yōu)先級越高。
需注意的：
】氐①色瘩、!important的優(yōu)先級是最高的，但出現(xiàn)沖突時則需比較四位數(shù);
∫菰ⅰ②居兆、優(yōu)先級相同時，則采用就近原則竹伸，選擇最后出現(xiàn)的樣式;
∧嗥堋③簇宽、繼承得來的屬性，其優(yōu)先級最低;
!important > 行內樣式>ID選擇器 > 類選擇器 > 標簽 > 通配符 > 繼承 > 瀏覽器默認屬性
css選擇器使用強烈建議采用低權重原則吧享，利于充分發(fā)揮css的繼承性魏割，復用性，模塊化钢颂、組件化钞它。
CSS 選擇器權重計算規(guī)則
CSS優(yōu)先級及important屬性
