CSS擬似クラス

擬似クラスは常に擬似要素と混同され、擬似要素の効果は実際の要素を追加することによって達成されるのと同じであり、擬似クラスの効果は実際のクラスを追加することによって達成されるのと同じである.実際css 3は両者を区別するために,擬似クラスを1つのコロンで表し,擬似要素を2つのコロンで表すことを明確に規定している.この文書では、擬似クラスの詳細について説明します.
 
アンカーポイント
アンカー,よく見られる5つの偽クラスがあり,それぞれlink,:hover,:active,:focus,:visitedである.について

a:link{background-color:pink;}/*  ，   */

a:hover{background-color:lightblue;}/*  ，    */

a:active{background-color:lightgreen;}/*  ，    */

a:focus{background-color:lightgrey;}/*  ，    */

a:visited{color:orange;}/*       ，    *//*[  ]visited          、    、outline     */

擬似クラス順序
擬似クラス順序についてはlove-hateという口癖があり,擬似クラスを表す順序はlink,visited,focus,hover,activeである.しかし、偽類の順序はそうであるしかないのだろうか.なぜこの順番なのでしょうか?
CSS積層には後ろが前を覆うという法則が重要であるため,擬似クラスの順序は慎重に考慮する必要がある.
【1】linkとvisitedは先頭にある必要があり、優先順位がない場合、linkまたはvisitedの効果は上書きされます.
[注意]linkとvisitedは静的擬似クラスと呼ばれ、ハイパーリンクにのみ適用されます.
【2】hover、active、focusの3つの擬似クラスはfocus、hover、activeの順でなければなりません.focus状態でもhoverとactiveをトリガする必要があり、activeをトリガするにはhoverを先にトリガする必要があるので、activeはhoverの後ろに置く
[注意]hover、active、focusは動的擬似クラスと呼ばれ、任意の要素に適用できますが、IE 7-ブラウザではサポートされていません:focus、:hoverおよび:activeはIE 6-ブラウザで設定にのみサポートされています.
最終的な順序は2つしかありません:link、visited、focus、hover、activeまたはvisited、link、focus、hover、active

a:link{background-color:pink;}/*  ，   */a:visited{color:orange;}/*       ，    */a:focus{background-color:lightgrey;}/*  ，    */a:hover{background-color:lightblue;}/*  ，    */a:active{background-color:lightgreen;}/*  ，    */

 
UI要素擬似クラス
UI要素疑似クラスはenabled、:disabled、:checkedの3つで、主にHTMLのform要素に対して、IE 8-ブラウザはサポートしていません

:enabled        
:disabled        
:checked        

input:enabled{
    border: 1px solid black;
    background-color: transparent;
}input:disabled{
    border: none;
    background-color: gray;
}input:checked{
    outline: 2px solid lightblue;
}

         Male Female

[注意]inputと:enabledの間にスペースは使用できません
構造擬似クラス
構造擬似クラスは以下の3つのケースに分けられ、IE 8-ブラウザではサポートされていない
//以下はEが親、Fが子
【1】:nth-child(n)、:nth-last-child(n)、first-child、last-child、:only-child

E F:nth-child(n)                  n    
E F:nth-last-child(n)               n    
E F:first-child                      ， E F:nth-child(1)  
E F:last-child                        ， E F:nth-last-child(1)  
E F:only-child                           

[注意]:first-childおよび:last-childはIE 6-ブラウザのみでサポートされていません
nは整数(1から)であってもよいし、式であってもよいし、キーワード(even,odd)であってもよい

p:first-child    　　       
       ，  
             
p > i:first-child        
         
p:first-child i 　　               
        

li:nth-child(odd){color: red;} li:nth-last-child(3){color: green;}li:first-child{color: blue;}li:last-child{color: yellow;}div:only-child{background-color:lightgrey;}

    
第一个DIV
    
第二个DIV
    
第三个DIV
    
第四个DIV
    
第五个DIV
    
第六个DIV
        
 
  
 
  
 
  
【2】:nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of-type、:only-of-type
 
  
E F:nth-of-type(n)                        n    
E F:nth-last-of-type(n)                     n    
E F:first-of-type                         1    ， E F:nth-of-type(1)  
E F:last-of-type         　                 1    ， E F:nth-last-of-type(1)  
E F:only-of-type        　　                   
  
.box div:nth-of-type(even){color: red;} 
.box p:nth-last-of-type(3){color: green;}
.box div:first-of-type{color: blue;}
.box p:last-of-type{color: yellow;}
.box div:only-of-type{color: pink;}
  

    
   div
    
   p
    
   div
    
   p
    
   div
    
   p

    
   div
  
【3】:root、:not、:empty、:target 
:root        　        :not         　              
:empty                   ，               
:target     　            
  
[注意]:notセレクタは、li:not(:last-of-type)などのナビゲーション間の縦線処理によく使用されます.
:root{color:red;}
div:not{background-color: lightgrey;}
p:empty{height:30px;width:30px;background:pink;}
:target{color:blue;}
  

    テスト
    
   div
    
   p
    
   div
    
   p
        
  
  
その他
【1】:lang()　　 言語に一致し、IE 7-ブラウザはサポートされていません.
p:lang(en)      "en" 
  
【2】単一の擬似クラスのみならず、擬似クラスを併用してもよい
[注意]順序に関係なく
div:hover:first-child{background-color: lightgreen;}div:last-of-type:active{background-color: lightblue;}
  
    
   div
    
   div