03 高階選擇器,屬性選擇器,偽類選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

.container p

.container .item p

使用》表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

.container>p

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可以使用並集選擇器

/*並集選擇器*/h3,a

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td 

/*使用此並集選擇器選中頁面中所有的標籤，頁面布局的時候會使用*/

比如有乙個這樣的標籤。

那麼

h4

.active
/* 交集選擇器 */h4.active

它表示兩者選中之後元素共有的特性。

屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。

語法：

/*根據屬性查詢*/

/*[for]*/
/*找到for屬性的等於username的元素 字型顏色設為紅色*/
/*[for='
username
']*/
/*以....開頭  ^*/ 
/*[for^='
user
']*/
/*以....結尾   $*/
/*[for$='
vvip
']*/
/*包含某元素的標籤*/
/*[for*="
vip"]*/
/**/
/*指定單詞的屬性*/label[for~='
user1']
input[type='
text
']

偽類選擇器

偽類選擇器一般會用在超連結a標籤中，使用a標籤的偽類選擇器，我們一定要遵循"愛恨準則"  love hate

/*沒有被訪問的a標籤的樣式*/.box ul li.item1 a:link

/*訪問過後的a標籤的樣式*/.box ul li.item2 a:visited
/*滑鼠懸停時a標籤的樣式*/.box ul li.item3 a:hover
/*滑鼠摁住的時候a標籤的樣式*/.box ul li.item4 a:active

/*選中第乙個元素*/div ul li:first-child

/*選中最後乙個元素*/div ul li:last-child
/*選中當前指定的元素  數值從1開始*/div ul li:nth-child(3
)        
/*n表示選中所有,這裡面必須是n, 從0開始的  0的時候表示沒有選中*/div ul li:nth-child(n)
/*偶數*/div ul li:nth-child(2n)
/*奇數*/div ul li:nth-child(2n-1
)        /*隔幾換色  隔行換色
隔4換色 就是5n+1,隔3換色就是4n+1
*/div ul li:nth-child(5n+1
)

/*設定第乙個首字母的樣式*/p:first-letter

/* 在....之前 新增內容   這個屬性使用不是很頻繁 了解  使用此偽元素選擇器一定要結合content屬性*/p:before
/*在....之後 新增內容，使用非常頻繁 通常與咱們後面要講到布局 有很大的關聯（清除浮動）*/p:after

屬性選擇器，偽類選擇器，偽元素選擇器

屬性選擇器 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 ...

屬性選擇器 偽類選擇器 層級選擇器

漸進增強 作用範圍 從小到大 先保證最基本的功能 使用者體驗提公升 優雅降級 作用範圍 從大到小 先針對版本較高的裝置進行專案構建，保證使用者體驗的完美 犧牲一些效果，保證最基本的功能 選擇器 選擇符 id class 型別 div span 後代選擇器 偽類選擇器 偽元素選擇 屬性選擇器 e at...

css選擇器 偽類選擇器 屬性選擇器

偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...