CSS選擇器:基礎(chǔ)、關(guān)系、屬性、偽類、偽對(duì)象等;
 
   
 
  選擇器優(yōu)先級(jí)的計(jì)算:style=1000(內(nèi)聯(lián)樣式表)
 
                                     ID=100
 
                                     class=10
 
                                     element=1
 
   
 
  1. 基礎(chǔ)選擇器  ID>class>element>*
 
   
 
  2. 關(guān)系選擇器
 
          1.包含(后代)選擇器 E F    E為F的外層元素
 
          2.子選擇器 E>F        E為F的父級(jí)
 
          3.相鄰選擇器 E+F       選擇與自身相鄰,且緊跟在自身后面的兄弟元素
 
          4.兄弟選擇器 E~F         所有的符合條件的位于自身后面的兄弟元素
 
          5. 并集選擇器 E,F(xiàn)         兩者不需要有什么關(guān)系,只是同用一個(gè)樣式
 
          6. 交集選擇器 E.F ,E#F   具有F類名或id名的E元素
 
   
 
  3.屬性選擇器     E與[ ]中不要有空格
 
      通過屬性來(lái)選擇,定義的時(shí)候用[] 來(lái)定義:
 
      【注意事項(xiàng):1.必須是屬性; 2. 屬性選擇器耗費(fèi)資源比基本選擇器大;】
 
      E[att]  通過屬性名來(lái)選擇
 
      E[att="val"]   屬性名和屬性值都符合才會(huì)被選中;
 
      E[att~="val"]  其中一個(gè)class符合即被選中;
 
      E[att^="val"]  以val開頭的att屬性被選中;
 
      E[att$="val"]  以val結(jié)尾的att屬性被選中;
 
      E[att*="val"]  包含了val內(nèi)容的屬性值的元素會(huì)被選中;
 
      E[att|="val"]  以val開頭,并且后面緊跟中劃線的元素被選中;
 
      [class]{ color:red ;  }  ----->所有具有類名的元素都為紅色;
 
   
 
  4. 偽類         E與:中不要有空格
 
      通過冒號(hào):定義偽類
 
      :root   選擇匹配文檔的根元素(每個(gè)文檔只有一個(gè)根元素)
 
      E:link   超鏈接未被點(diǎn)擊時(shí)的狀態(tài)(顏色、背景)               
 
      E:visited   超鏈接被訪問后的狀態(tài)
 
      E:hover  鼠標(biāo)懸停時(shí)的狀態(tài),不限a標(biāo)簽,其它元素也可以
 
      E:active  鼠標(biāo)按下時(shí)的狀態(tài)
 
    【測(cè)試超鏈接的幾個(gè)狀態(tài)時(shí),可以用快捷鍵Ctrl+H:清除緩存】 
 
      E:not(s)  除去括號(hào)里面的選擇器的元素,其它的元素會(huì)被選中。括號(hào)里面可以是class選擇器
 
    也可以是id選擇器,要通過.或#來(lái)選擇,并且        不要加引號(hào)
 
      E:first-child E需要具有父級(jí),并且E是父級(jí)的第一個(gè)元素  E代表了要操作元素本身,并非父元素
 
      E:last-child   同上
 
      E:only-child 具有父元素,并且E是父元素中唯一的
 
      E:empty 匹配完全沒有內(nèi)容的E元素,空格和換行都算做內(nèi)容。
 
      E:checked  可以匹配被選中的元素,
 
              如radio 和select 中的option
 
              <input type="radio" name="gender" checked="checked" />
 
              <option value="0" selected="selected" >汽車</option>
 
         -------cheked實(shí)例
 
              html結(jié)構(gòu)
 
              <form action="">
 
                      <input type="radio" name="gender" /><span>男</span>
 
                      <input type="radio" name="gender"/><span>女</span>
 
                      <select name="" id="">
 
                              <option value="0">汽車</option>
 
                              <option value="1" selected="selected">火車</option>
 
                              <option value="2">自行車</option>
 
                      </select>
 
              </form>
 
              css樣式
 
                          input:checked + span{color: red;}
 
                          option:checked{ color: aqua;}
 
   
 
  5.偽對(duì)象選擇器(不存在于HTML中,不會(huì)改變文檔的結(jié)構(gòu))   E與::中不要有空格
 
      用::來(lái)定義偽元素(偽對(duì)象)
 
      E::before{ content:" "; }
 
      E::after{ content:" "; }
 
            例:1.  16° -----> ::after 結(jié)合position:absolute;
 
                  2.   利用偽元素給文檔添加圖片 (display:block;設(shè)置大小;)
 
         3.利用偽元素清除浮動(dòng):.clearfloat:after {content: ""; display: block; height:0; clear:both; visibility: hidden;}
 
         4.利用偽元素繪制簡(jiǎn)單的圖形,例如小三角等;
 
    
 
          偽元素的用處還有很多,不再一一列舉;
 
  【注意事項(xiàng):
 
      E 只能有一個(gè)after和一個(gè)before,若有多個(gè)按最后一個(gè)顯示;
 
    偽元素不存在于文檔流,不能被選中;】
 
   
 
   
 
  <------學(xué)習(xí)筆記,如有錯(cuò)誤,謝謝指正!------->