~~~
<p class="test" id="first">hello world</p>
<h4>標題</h4>
~~~
~~~
(1)css元素選擇器
p{color:pink}
(2)class選擇器
.test{color:yellow}
(3)id選擇器
#first{color:blue}
(4)分組選擇器
p,h4{background:gray}
(5)后代選擇器
div>span{} //選取div所有子元素為span的標簽
div span{} //選中div之后的所有span元素
(6)兄弟選擇器
div+p{}選取緊鄰div之后的第一個兄弟元素
div~p{}選取緊鄰div之后的所有兄弟元素
(7)偽類選擇器
div:hover{}
input:focus{}
(8)偽元素-->用css自定義生成的元素
":before" 偽元素可以在元素的內容前面插入新內容
p:before{
content:''
}
":after" 偽元素可以在元素的內容之后插入新內容。
p:after{
content:''
}
(9).屬性選擇
div[class='test']{}
~~~
