關係選擇器包括：
包含、子、相鄰、兄弟選擇器
相鄰選擇器e+f
選擇緊貼在e後面的f元素
兄弟選擇器e~f
選擇e後面所有的兄弟元素f
<style>
p+p/*
相鄰選擇器，只會命中符合條件的相鄰的兄弟元素，p2、
p5將會變成紅色
*/p~p/*
兄弟選擇器，命中所有符合條件的兄弟元素，p2、
p3、p4、
p5將會變成藍色
*/style>
<body>
<
p>p1
p>
<
p>p2
p>
<
h4>
標題h4>
<
p>p3
p>
<
h4>
標題h4>
<
p>p4
p>
<
p>p5
p>
body>
偽類選擇器
<style>
input:checked/*
匹配使用者介面上處於選中狀態的元素(用於
input:type
為radio
與checkbox
時) */
input:enabled/*
匹配使用者介面上處於可用狀態的元素
*/input:disabled/*
匹配使用者介面上處於禁用狀態的元素
*/style>
li:nth-child(n)/*匹配父元素的第
n個子元素
li，假設該子元素不是
li，則選擇符無效
*/li:first-child/*
匹配父元素的第乙個子元素
li*/
li:nth-last-child(n)/*
匹配父元素的倒數第
n個子元素
li*/
p:nth-of-type(n)/*
匹配同型別中的第
n個同級兄弟元素
p*/
屬性選擇器
e[att]：選擇具有att屬性的e元素。
e[att="val"]：選擇具有att屬性且屬性值等於val的e元素。
e[att~="val"]：選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中乙個等於val的e元素（包含只有乙個值且該值等於val的情況）。
e[att^="val"]：選擇具有att屬性且屬性值為以val開頭的字串的e元素。
e[att$="val"]：選擇具有att屬性且屬性值為以val結尾的字串的e元素。
e[att*="val"]：選擇具有att屬性且屬性值為包含val的字串的e元素。
e[att|="val"]：選擇具有att屬性且屬性值為以val開頭並用連線符"-"分隔的字串的e元素，如果屬性值僅為val，也將被選擇。
補充 CSS選擇器樣式的規範！
css 頁面樣式，美化頁面 css樣式的三個規則 1內聯式 直接寫在html標籤中直接對html標籤使用 style屬性 語法 style 樣式 值 樣式 值 優點 操控精準 缺點 不靈活，2嵌入式 在標籤內給標籤css樣式 在head標籤內 優點 精簡 缺點 控制不靈活 紅色是固定的寫法 link...
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 分組選擇器 選擇...