css選擇器

css選擇器

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