/*屬性選擇器：屬性是相對於標籤而言。所謂屬性選擇器就是根據指定名稱的屬性的值來查詢元素*//*1.e[attr]:查詢指定的擁有attr屬性的e標籤。如查詢擁有style屬性的li標籤*/
li[style]
/*2.e[attr=value]:查詢擁有指定的attr屬性並且屬性值為value的e標籤。如想查詢擁有class屬性並且值為red的li標籤 =是嚴格匹配*/
li[class=red]
/*3.e[attr*=value]:查詢擁有指定的attr屬性並且屬性值中包含(可以在任意位置)value的e標籤*/
li[class*=red]
/*4.e[attr^=value]:查詢擁有指定的attr屬性並且屬性值以value開頭的e標籤*/
li[class^=blue]
/*5.e[attr$=value]:查詢擁有指定的attr屬性並且屬性值以value開結束的e標籤*/
li[class$=blue]
/*兄弟偽類：+：獲取當前元素的相鄰的滿足條件的元素
~：獲取當前元素的滿足條件的兄弟元素*/
/*下面這句樣式說明查詢 ：新增了.first樣式的標籤的相鄰的li元素
1.相鄰
2.必須是指定型別的元素*/
.first + li
/*下面樣式查詢新增了.first樣式的元素的所有兄弟li元素
1.必須是指定型別的元素*/
.first ~ li
/*相對于父元素的結構偽類*//*e:first-child:查詢e元素的父級元素中的第乙個e元素。在查詢的時候並不會限制查詢的元素的型別*/
/*下面這句樣式查詢：li的父元素中的第乙個li元素
1.相對於當前指定元素的父元素
2.查詢的型別必須是指定的型別*/
li:first-child
/*e:last-child:查詢e元素的父元素中最後乙個指定型別的子元素*/
li:last-child
/*查詢的時候限制型別 first-of-type*/
/*1.也是相對于父元素
2.在查詢的時候只會查詢滿足型別條件的元素，過渡掉其它型別的元素*/
li:first-of-type
li:last-of-type
/*指定索引位置 nth-child(從1開始的索引||關鍵字||表示式)*/
li:nth-child(5)
/*偶數個元素新增背景 even:偶數 odd:奇數*/
/*li:nth-child(even)
li:nth-child(odd)*/
li:nth-of-type(even)
li:nth-of-type(odd)
/*想為前面的5個元素新增樣式*/
/*n:預設取值範圍為0~子元素的長度.但是當n<=0時，選取無效
0>>5
1>>4
...4>>1
5>>0*/
li:nth-last-of-type(-n+5)
li:nth-of-type(-n+5)
/*空值:沒有任何的內容，連空格都沒有*/
li:empty
/*e:target:可以為錨點目標元素新增樣式，當目標元素被觸發為當前錨鏈結的目標時，呼叫此偽類樣式*/
h2:target
偽元素選擇器 屬性選擇器 兄弟元素選擇器
一 偽元素 使用偽元素來表示元素中的一些特殊位置 常用 1 first letter 為元素中的第乙個位置設定樣式 2 first line 為元素中的第一行位置設定樣式 3 before 為元素最前邊的部分設定樣式 一般before都需要結合屬性content樣式一起使用 通過content可以向...
屬性選擇器，偽類選擇器，偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...
屬性選擇器 子元素的偽類 兄弟元素選擇器
charset utf 8 title 屬性選擇器 作用 可以根據元素中的屬性值來選取指定元素 語法 屬性名 選取含有指定屬性的元素 例 p title 語法 屬性名 屬性值 選取含有指定屬性的元素 p title hello 語法 屬性名 屬性值 選取以指定內容開頭的元素 p title a 語法...