>## `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>元素选择器 ~~~