高階選擇器
並集選擇器
p,ul{}
交集選擇器
p.odd{}，交集選擇器中間不能有空格等其他符號；「
.
」後不能是標籤選擇器
多個類樣式的引用
多個類樣式的優先順序只與編寫有關，與引用順序無關
層次選擇器
後代選擇器
body p{}
子選擇器
body>p
相鄰兄弟選擇器
.active+p
通用兄弟選擇器
.active~p
結構偽類選擇器
e:first-child
作為父元素的第乙個子元素的元素e
e:last-child
作為父元素的最後乙個子元素的元素e
e f:nth-child(n)
選擇父級元素e的第n個子元素f，（n可以是1、2、3），關鍵字為even、odd
e:first-of-type
選擇父元素內具有指定型別的第乙個e元素
e:last-of-type
選擇父元素內具有指定型別的最後乙個e元素
e f:nth-of-type(n)
選擇父元素內具有指定型別的第n個f元素
屬性選擇器
e[attr]：選擇匹配具有屬性attr的e元素
e[attr=val]：選擇匹配具有屬性attr的e元素,並且屬性值為val（其中val區分大小寫）
e[attr^=val]：選擇匹配元素e，且e元素定義了屬性attr，其屬性值是以val開頭的任意字串
e[attr$=val]：選擇匹配元素e，且e元素定義了屬性attr，其屬性值是以val結尾的任意字串
e[attr*=val]：選擇匹配元素e，且e元素定義了屬性attr，其屬性值包含了「val」，換句話說，字串val與屬性值中的任意位置相匹配
彈性盒模型
容器設定
設定其內子元素的彈性布局：dispaly:flex
元素設定
設定元素的參與彈性布局：display:inline-flex;
設定為彈性排列後，元素預設為水平排列
容器的樣式屬性
flex-direction 決定主軸的方向
flex-wrap 如果一條軸線排不下，如何換行
flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式
justify-content 定義了專案在主軸上的對齊方式
align-items 定義專案在交叉軸如何對齊
align-content 定義了多根軸線的對齊方式
專案的樣式屬性
order 定義專案的排列順序。
flex-grow 定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
flex-shrink 定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
flex-basis 定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。
flex flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。
align-self 允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。
03 高階選擇器,屬性選擇器,偽類選擇器
使用空格表示後代選擇器。顧名思義，父元素的後代 包括兒子，孫子，重孫子 container p container item p view code 使用 表示子代選擇器。比如div p,僅僅表示的是當前div元素選中的子代 不包含孫子.元素p。container pview code 多個選擇器之...
CSS高階選擇器
css高階選擇器 例子 並集選擇器 p,h1 p和h1 標籤文字變紅色 交集選擇器 標籤選擇器 id 選擇器或者標籤選擇器 類選擇器 p.class1 類名為 class1 的p 標籤樣式中文字為黃色，當不同標籤使用相同類名時 後代選擇器 巢狀標籤 p span 注意兩者標籤中有空格的 this i...
css高階選擇器
css3高階選擇器 偽類選擇器 p first of type 匹配同型別中的第乙個同級兄弟元素p p last of type 匹配同型別中的最後乙個同級兄弟元素p p first child 匹配父元素的第乙個子元素p。p last child 匹配父元素的第乙個子元素p。p nth child...