分类

  • 通配选择器 - *
    * {}
  • 类型(元素)选择器 - Type
    div {}
  • 类 - Class
    .container {}
  • 唯一标识 - ID
    #form1 {}
  • 属性 - Attribute
    *[key] {}                  /* 包含 key 属性 */
    *[key="value"] {}          /* 包含 key 属性且值等于 value */
    *[key~="value"] {}         /* 包含 key 属性,值为以空格作为分隔符的字符串列表,其中一个字符串等于 key */
    *[key|="value"] {}         /* 包含 key 属性且值等于 value ,或者值以 value- 开头 */
    *[key^="value"] {}         /* 包含 key 属性且值以 value 开头 */
    *[key$="value"] {}         /* 包含 key 属性且值以 value 结尾 */
    *[key*="value"] {}         /* 包含 key 属性且值至少包含一个 value */
    *[key="value" i] {}        /* 添加 i 或者 I 忽略匹配属性值的大小写 */
  • 伪类 - Pseudo-class
    .ex:active {}               /*  */      
    .ex:any {}                  /*  */  
    .ex:checked {}              /*  */      
    .ex:default {}              /*  */      
    .ex:dir() {}                /*  */      
    .ex:disabled {}             /*  */      
    .ex:empty {}                /*  */      
    .ex:enabled {}              /*  */      
    .ex:first {}                /*  */      
    .ex:first-child {}          /*  */          
    .ex:first-of-type {}        /*  */              
    .ex:fullscreen {}           /*  */          
    .ex:focus {}                /*  */      
    .ex:hover {}                /*  */      
    .ex:indeterminate {}        /*  */              
    .ex:in-range {}             /*  */      
    .ex:invalid {}              /*  */      
    .ex:lang() {}               /*  */      
    .ex:last-child {}           /*  */          
    .ex:last-of-type {}         /*  */          
    .ex:left {}                 /*  */  
    .ex:link {}                 /*  */  
    .ex:not() {}                /*  */      
    .ex:nth-child() {}          /*  */          
    .ex:nth-last-child() {}     /*  */              
    .ex:nth-last-of-type() {}   /*  */                  
    .ex:nth-of-type() {}        /*  */              
    .ex:only-child {}           /*  */          
    .ex:only-of-type {}         /*  */          
    .ex:optional {}             /*  */      
    .ex:out-of-range {}         /*  */          
    .ex:read-only {}            /*  */          
    .ex:read-write {}           /*  */          
    .ex:required {}             /*  */      
    .ex:right {}                /*  */      
    .ex:root {}                 /*  */  
    .ex:scope {}                /*  */      
    .ex:target {}               /*  */      
    .ex:valid {}                /*  */      
    .ex:visited {}              /*  */      
  • 伪元素 - Pseudo-element
    ::after (:after)                    /*  */                        
    ::-ms-fill                          /*  */                
    ::-ms-fill-lower                    /*  */                        
    ::-ms-fill-upper                    /*  */                        
    ::-ms-thumb                         /*  */                
    ::-ms-track                         /*  */                
    ::-moz-progress-bar                 /*  */                        
    ::-moz-range-progress               /*  */                            
    ::-moz-range-thumb                  /*  */                        
    ::-moz-range-track                  /*  */                        
    ::-webkit-progress-bar              /*  */                            
    ::-webkit-progress-value            /*  */                                
    ::-webkit-slider-runnable-track     /*  */                                    
    ::-webkit-slider-thumb              /*  */                            
    ::before (:before)                  /*  */                        
    ::first-letter (:first-letter)      /*  */                                    
    ::first-line (:first-line)          /*  */                                
    ::selection                         /*  */                
    ::backdrop                          /*  */                
  • 后代选择器 - Descendant
    div div {}
  • 子元素选择器 - Child
    div > div {}
  • 相邻兄弟元素选择器 - Adjacent-sibling
    div + div {}

参考