## 1.元素选择器 - 直接选择 ~~~ <style> h1{ } </style> ~~~ ps:写样式尽量不用元素选择器 ## 2.ID选择器 - 通过ID选择 ~~~ <style> #id{ } </style> ~~~ ps: 写样式尽量不用ID选择 ## 3.Class选择器 - 通过class选择 ~~~ <style> .class{ } </style> ~~~ ## 4.伪类选择器 ~~~ .class:hover{ } ~~~ ## 5.分组选择器 - 给多个元素一个样式 ~~~ .one,.p,.div{ } ~~~ ## 6.后代选择器 - 选择一个元素里的所有同一后代元素。 ~~~ .content div{ } //选中content里的所有div元素 ~~~ - 选择直接子代元素 ~~~ .content>div{ } ~~~ ## 7.兄弟选择器 ~~~ .one+p{ }// 选择one之后的第一个兄弟元素 .one~p{ }//选择one之后的所有兄弟元素 ~~~ ## 8.伪类 ~~~ p:hover{ }//鼠标悬停伪类 input:focus{ }//获取焦点伪类 ~~~ ## 9.选择器的优先级 - ID>Class>元素选择器 - 加上！important 优先级最大 - 嵌套的越深，权重越高