一.基本的css選擇器：1.萬用字元 例：*
2.類別選擇器 例：.container
3.id選擇器 例：#div1
4.群組選擇器 例：span,.class,#id
5.並列選擇器 例： div.class
6.子代選擇器 例：div span
7.直接子代選擇器 例：div>span
二.複雜的css選擇器
複雜選擇器
例子含義
版本/相容性
選1 + 選2
div+span
2/ie6以下不支援
選1~選2
div~span
通用兄弟選擇器：選擇選1所有的兄弟元素中與選2匹配的元素
3注意：只匹配選1後的元素，之前的元素匹配不到
[屬性名]
[title]
選擇具有指定html屬性的元素
2[屬性名=屬性值]
[type=text]
匹配具有指定屬性且屬性值為指定值的元素
2[屬性名~=屬性值]
[type~=text]
匹配具有指定屬性且屬性值中包含指定的完整的單詞的元素（不是單詞的不行）
3[屬性名*=屬性值]
[class*=str]
匹配具有指定的屬性且屬性值中包含指定的字母組合
(不必是完整的單詞)3
[屬性名^=屬性名]
[class^=str]
匹配具有指定的屬性且屬性值以指定的字母開頭
3[屬性名$=屬性值]
[class$=str]
匹配具有指定的屬性且屬性值以指定的字母結尾
3[屬性名|=屬性值]
匹配具有指定的屬性且屬性值以指定的完整的單詞開頭
(要麼只有它，要麼其後有-)3
:target
:target{}
div:target{}
目標偽類選擇器；選定【當前錨點的】目標元素
ie8-不支援
:enabled
:enabled
匹配當前啟用的所有表單元素
:disabled
:disabled
匹配當前禁用的所有表單元素
:checked
:checked
匹配當前選中的表單元素
:first-child
span:first-child{}
div :first-child{}
匹配父元素中的第乙個子元素（純文字不算子元素）
:last-child
p:last-child
div :last-child{}
匹配作為父元素中最後乙個子元素出現的元素
:only-child
p:only-child{}
匹配作為父元素中唯一子元素出現的元素
:empty
div:empty
匹配沒有子元素且沒有任何文字內容的元素
:not(選1)
div:not(.strong){}
span:not([class=content])
否定選擇器；匹配不被選擇器1選定的元素
::selection
::selection
匹配一段文字中被選擇部分
三.內容選擇器：
選擇器1:before
選擇器1:after
注意：content屬性必須配合:before/:after選擇器使用。
計數器的使用：
body
p:before
CSS基礎學習 複雜選擇器
派生選擇器 格式 選擇器1,選擇器2,選擇器n 例 p,h1 用於對於多個選擇器進行樣式修改，由簡單選擇器組合而成的選擇器，可以是簡單選擇器中的任意組合，如上面 例，就是修改了p標籤和h1標籤的字型顏色。根據屬性名查詢元素 格式 元素 屬性名 例 p id 前面新增元素的名字，然後後面加上屬性名，比...
css3複雜選擇器
今天antd 設定樣式 被教育了一番，上來第一感覺這樣式咋搞啊，一臉懵逼，還是css 掌握不牢固，今天記下css3複雜選擇器。1.相鄰兄弟選擇器 p b 同乙個父元素下p標籤後面的第乙個兄弟元素b 2.通用兄弟選擇器 p b 同乙個父元素下p標籤後面的所有兄弟元素b 3.屬性選擇器 將元素屬性用於選...
CSS3複雜選擇器
1.相鄰兄弟選擇器 p b 同乙個父元素下p標籤後面的第乙個兄弟元素b 2.通用兄弟選擇器 p b 同乙個父元素下p標籤後面的所有兄弟元素b 3.屬性選擇器 將元素屬性用於選擇器中，從而獲取指定元素屬性或者值得元素 語法 屬性 匹配 指定屬性 的 所有 元素 元素 屬性 匹配 指定屬性 的 指定 元...