>## `css`選擇器 - ##### 4.1分組選擇器 ~~~ div,p,h4{background:gray;} ~~~ - ##### 4.2后代選擇器 ~~~ .parent>h1{color:red;} 選擇parent之后的直接元素 .parent h1{}選中parent之后的所有h1元素 <div class="parent"> <h1>hello world</h1> <h1>hello world</h1> <h1>hello world</h1> <div> <h1>hello world</h1> </div> </div> ~~~ - ##### 4.3兄弟選擇器 ~~~ div+p{}選取緊鄰div之后的第一個兄弟元素 div~p{}選取緊鄰div之后的所有兄弟元素 ~~~ - ##### 4.4偽類input ~~~ input:focus{ background: red; } <input type="text"> ~~~ - ##### 4.5偽元素 ~~~ ":before" 偽元素可以在元素的內容前面插入新內容 p:before{ content:'' } ":after" 偽元素可以在元素的內容之后插入新內容。 p:after{ content:'' } ~~~ - ##### 4.6屬性選擇器 ~~~ div[class='test']{} ~~~ ### 選擇器的優先級別排序 ~~~ !important>id>class>元素選擇器 ~~~