## 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 優先級最大 - 嵌套的越深，權重越高