css選擇器
- CSS(給HTML標籤設置樣式的)
- CSS定義:
層疊樣式表
- CSS語法:
選擇器 {k1: v1; k2:v2...}
- CSS代碼存在的位置
- 直接寫在標籤中的style屬性
- 寫在head標籤中的style標籤內
- 寫在單獨的CSS文件中,經過link標籤引用
- CSS選擇器(定義如何在HTML中找標籤)
- 基本選擇器
- ID選擇器 --> #p1
- 標籤選擇器 --> div
- 類選擇器 --> .c1
- 通用選擇器 --> *
- 組合選擇器
- 子子孫孫選擇器(後代選擇器) --> div p
- 兒子選擇器 --> div>p
- 毗鄰選擇器(緊挨着下面的標籤) --> div+p
- 弟弟選擇器(同級下面全部的標籤) --> div~p
- 屬性選擇器
- 有某個屬性的標籤 --> div[title]
- 有屬性而且屬性值等於我給定的值 --> div[title='hello']
- 分組和嵌套
- 分組應用於多個選擇器找到的標籤應用相同的樣式時,爲了不重複寫到一塊兒
div, p {color: red}
- 基本選擇器之間能夠任意嵌套組合使用
.c1>p
- 僞類選擇器
- a:link-->未訪問的連接
- a:visited-->已訪問的連接
- a:active-->點擊的那一刻
- a:hover-->鼠標移上去以後
- input:focus-->input輸入框獲取焦點時樣式
- 僞元素選擇器
- #c3:first-letter-->id爲c3的第一個單詞
- .p:after-->class爲p的元素後
- .p:before-->class爲p的元素以前
- 選擇器的優先級
- 當選擇器相同的時候
誰最後加載聽誰的!
- 選擇器不一樣的時候
- 內聯樣式(1000) > ID選擇器(100) > class選擇器(10) > 元素選擇器(1)
- 不講道理的!import
歡迎關注本站公眾號,獲取更多信息