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
相關文章
相關標籤/搜索