前端页面开发避免不了要给盒元素设置各式各样的样式，今天带大家理一下css中常用的选择器及它们之间的优先级。
选择器选择器名称
选择器符号
行内样式style=""
id选择器
#id
类选择器
.className
伪类选择器
:hover
标签选择器
p
伪元素选择器
::after
兄弟选择器
+
子选择器
后代选择器
divp
通配符
*
1.行内样式!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstyle/stylebodydivstyle="font-size:18px;"css行内/div/body/html2.id选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstyle#id{font-size:18px;}/stylebodydivid="box"cssid选择器/div/body/html3.类选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstyle.id{font-size:18px;}/stylebodydivclass="box"css类选择器/div/body/html4.伪类选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstylediv:hover{font-size:18px;}/stylebodydivcss选择器/div/body/html5.标签选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstylep{font-size:18px;}/stylebodypcss选择器/p/body/html6.伪元素选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstylediv{width:px;height:px;background:cadetblue;}div::before{content:"增加内容";background:red;}/stylebodydiv/div/body/html7.兄弟选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstyleh1+p{color:cadetblue;}/stylebodydivh1兄弟选择器/h1p兄弟选择器/pp兄弟选择器/pp兄弟选择器/pp兄弟选择器/p/div/body/html8.子选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstyledivp{color:cadetblue;}/stylebodydivp子选择器/pp子选择器/pp子选择器/p/div/body/html9.后代选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstyledivp{color:cadetblue;}/stylebodydivp子选择器/pp子选择器/pp子选择器/p/div/body/html10.通配选择器
!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleCSS选择器/title/headstyle*{font-size:18px;color:cadetblue;}/stylebodydivp通配选择器/ps通配选择器/sspan通配选择器/span/div/body/html优先级
!important行内id选择器类选择器标签选择器END
以上就是今天的全部内容啦，我们下期再见！
Shids希望看完文章的你能带着答案离开