層級選擇器
e>f
子選擇器
選擇匹配的f元素，且匹配的f元素所匹配的e元素的子元素
div>em
1html**：
我第1個是p標籤
我第1個是em標籤
我是小標題
我第2個是em標籤
我第3個是em標籤
e+f相鄰兄弟選擇器
選擇匹配的f元素，且匹配的f元素緊位於匹配的e元素的後面
div+p
1html**：
我第1個是p標籤
我第1個是em標籤
我就是緊貼在div元素後面的第乙個p元素
我就是緊貼在div元素後面的第二個p元素
e~f通用選擇器
選擇匹配的f元素，且位於匹配的e元素後的所有匹配的f元素
div~p
1html**：
我第1個是p標籤
我第1個是em標籤
我就是緊貼在div元素後面的第乙個p元素
我就是緊貼在div元素後面的第二個p元素
二結構性偽類選擇器
x:first-child 匹配子集的第乙個元素。ie7就可以支援
x:last-child匹配父元素中最後乙個x元素
x:nth-child(n)用於匹配索引值為n的子元素。索引值從1開始
x:only-child這個偽類一般用的比較少，比如上述**匹配的是div下的有且僅有乙個的p，也就是說，如果div內有多個p，將不匹配。
x:nth-last-child(n)從最後乙個開始算索引。
x:first-of-type匹配同級兄弟元素中的第乙個x元素
x:last-of-type匹配同級兄弟元素中的最後乙個x元素
x:nth-of-type(n)匹配同型別中的第n個同級兄弟元素x
x:only-of-type匹配屬於同型別中唯一兄弟元素的x
x:nth-last-of-type(n) 匹配同型別中的倒數第n個同級兄弟元素
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...