css選擇符整理及僞類、僞對象

css選擇符整理

• 1、通配符 *

  *{
             margin: 0;
             padding: 0;
         }

  做用：將頁面中全部元素的內外補丁設置爲0；

  .class * {
         color:#ffffff;
     }

  將class類下面的全部元素字體顏色設置爲白色；

• 2、標籤選擇符

div,
        p,
        a,
        span,
        h1 {
            color: #FFFFFF;
        }

html有不少標籤，能夠直接用標籤選擇符給他們加樣式，可是標籤選擇符和通配符的選擇範圍都很大，建議配合其餘選擇符一塊兒使用。

• 3、類選擇符
  在頁面中，咱們能夠給標籤加上一個屬性，class-類，自定義一個類名，好比<div class="myClass"></div>，而後我就能夠在css中用類選擇符給這個類加上咱們想要的屬性。

  .myClass{
             color: #FFFFFF;
         }

• 4、id選擇符
  id選擇符與類選擇符有點類似<div id="myClass"></div>

  #myClass{
             color: #FFFFFF;
         }

  前面是一個 # 的前綴，與class不一樣的是，id在html中只容許出現一次，可能你明白id的惟一性，可是你寫了兩個div，相同class、id。卻發現用id添加樣式的時候，兩個id都成功出現了正常樣式且沒有報錯。可是相同id會致使JavaScript等腳本語言判斷錯誤。這麼說可能沒法解釋好id選擇符能夠給兩個相同div添加樣式，可是看這裏傳送門，簡單點說，這就是個原則，就好像一個國家有它的法率（故意錯別字，我怕被系統屏蔽）你不能違反法率，不然就容不下你。[1]

• 5、包含選擇符
  包含選擇符也能夠叫派生選擇符或後代選擇器，由於做用是在某元素的子元素上。

  .class1 span{
         
     }

• 6、子選擇符
  做用是定義子元素對象的樣式，沒法定義子元素之外的對象。（書上是這麼說的）我想加個詞，定義某元素的直接子元素對象的樣式。打個比方，我有一處房產，可是隻能給我兒子，不能給我孫子。打個比方哈，我沒有房子。/淚崩。
  父元素子元素直接加個'>'符號。

.class1 > span{
        
    }

• 7、相鄰選擇符
  匹配同一個父級下某元素的下一個元素。
  （這裏我想問問既然是下一個元素爲何要叫相鄰選擇符，相鄰不是先後左右相鄰嗎，叫下級選擇符好了，哈哈哈，開個玩笑。）相鄰元素直接用'+'符號鏈接。

.myClass + p{
        color: red;
    }

• 8、屬性選擇符
  任何一個HTML標籤都會有屬性存在，且每一個屬性都具備屬性值；好比：

  <p class="myClass" id="zz" style="color: #FFFFFF;"></p>

  屬性選擇符分爲七（4+3）種模式：

  1.E[attr]

  div[class] {
         color: #FFFFFF;
     }
     --具備class屬性的div字體顏色白色（忽略attr的值）;

  2.E[attr="value"]

  div[class="myClass"] {
         color: #FFFFFF;
     }
     --class的值爲'myClass'的div字體顏色白色;

  3.E[attr~="value"]

  div[class~="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具備'attr'屬性且屬性值是具備空格符號隔開的字段其中一個字段等於value的E標籤元素
     ex:
     <div class="myClass zz"></div>
     <div class="myClass cc"></div>

  4.E[attr|="value"]

  div[class|="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具備'attr'屬性且屬性值是以value值開頭及使用連字符'-'分割的E標籤元素。
     ex:
     <div class="myClass-zz"></div>
     <div class="myClass-cc"></div>

  5.E[attr^="value"]

  div[class^="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具備'attr'屬性且屬性值是以value值開頭的E標籤元素。
     ex:
     <div class="myClasszz"></div>
     <div class="myClasscc"></div>

  6.E[attr$="value"]

  div[class$="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具備'attr'屬性且屬性值是以value值結尾的E標籤元素。
     ex:
     <div class="zzmyClass"></div>
     <div class="ccmyClass"></div>

  7.E[attr*="value"]

  div[class*="myClass"] {
         background-color: #000000;
         color: #fff;
     }--匹配具備'attr'屬性且屬性值含有value的E標籤元素。
     ex:
     <div class="myClass-zz"></div>
     <div class="myClass-cc"></div>

• 9、選擇符組合
  選擇符最大的優點不是能夠給某元素或某類元素書寫樣式，而已針對不一樣的頁面結構組合成各類組合。
  不得不提的就是選擇符組合的嵌套層數，雖然沒有哪裏直接規定嵌套層數不能超過多少，可是，嵌套過多層數容易產生垃圾代碼也不利於收錄會。

• 10、css選擇符權重
  把特殊性分爲4個等級，每一個等級表明一類選擇器，每一個等級的值爲其所表明的選擇器的個數乘以這一等級的權值，最後把全部等級的值相加得出選擇器的特殊值。

4個等級的定義以下：

第一等：表明內聯樣式，如: style=」」，權值爲1000。
第二等：表明ID選擇器，如：#content，權值爲100。
第三等：表明類，僞類和屬性選擇器，如.content，權值爲10。
第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲1。
PS:通用選擇符'*'、子選擇符'>'、相鄰選擇符'+'的權值爲0。

使用css組合的時候，權值等於每一層的權值相加。

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
權值爲： 10 + 100 + 1 = 111 ;

• 11、僞類、僞對象選擇符

  常見僞類：

  :link:指示爲超連接（既有一個href屬性），並指向一個未訪問地址的全部錨。
     :visited:指示做爲已訪問地址超連接的全部錨。
     :focus:指示當前擁有輸入焦點的元素，也就是說，能夠接受鍵盤輸入或者能以某種方式激活的元素。
     :hover:指示鼠標指針停留在哪一個元素上，例如，鼠標指針可能停留在一個超連接上
     :active:指示被用戶輸入激活的元素，例如，鼠標指針停留在一個超連接上時，若是用戶點擊鼠標，就會激活這個超連接，:active將指示這個超連接。
     :first-letter:設置對象內的第一個字符的樣式表屬性。 
     :first-line:設置對象內的第一行的樣式表屬性。 
     :first-child:設置對象（Selector1）的第一個子對象（Selector2）的樣式表屬性。 
     :first:設置頁面容器第一頁使用的樣式表屬性。僅用於@page規則。 
     :left:設置頁面容器位於裝訂線左邊的全部頁面使用的樣式表屬性。僅用於@page規則。 
     :right:設置頁面容器位於裝訂線右邊的全部頁面使用的樣式表屬性。僅用於@page規則。 
     :lang:設置對象使用特殊語言的內容樣式表屬性。

  結構性僞類：

  E:nth-child(n):匹配父元素中的第n個子元素E。
     E:nth-last-child(n):匹配父元素中的倒數第n個結構子元素E。
     E:nth-of-type(n):匹配同類型中的第n個同級兄弟元素E。
     E:nth-last-of-type(n):匹配同類型中的倒數第n個同級兄弟元素E。
     E:last-child:匹配父元素中最後一個E元素。
     E:first-of-type:匹配同級兄弟元素中的第一個E元素。
     E:only-child:匹配屬於父元素中惟一子元素的E。
     E:only-of-type:匹配屬於同類型中惟一兄弟元素的E。
     E:empty:匹配沒有任何子元素（包括text節點）的元素E。

  UI元素狀態僞類:

  E:checked:匹配全部用戶界面（form表單）中處於選中狀態的元素E
     E:enabled:匹配全部用戶界面（form表單）中處於可用狀態的E元素
     E:disabled:匹配全部用戶界面（form表單）中處於不可用狀態的E元素
     E:selection:匹配E元素中被用戶選中或處於高亮狀態的部分

  否認僞類:

  E:not(s):匹配全部不匹配簡單選擇符s的元素E

  目標僞類:

  E:target:匹配相關URL指向的E元素

  通用兄弟元素選擇器:

  E ~ F:匹配E元素以後的F元素

  僞對象：

  :before用來和content屬性一塊兒使用，設置在對象前（依據對象樹的邏輯結構）發生的內容。
     :after用來和content屬性一塊兒使用，設置在對象後（依據對象樹的邏輯結構）發生的內容。

注：本文參考《css那些事兒》、css2/css3參考手冊。僅表明我的觀點，如有不對或不當處請指正。轉載請註明出處，謝謝合做！