CSS選擇器

一、基本選擇器

二、分組選擇器

三、通配符選擇器

四、類選擇器

五、ID選擇器

六、屬性選擇器

七、後代選擇器

八、子元素選擇器

九、相鄰兄弟選擇器

十、僞類

十一、僞元素

 

一、基本選擇器

 

若是設置 HTML 的樣式，選擇器一般將是某個 HTML 元素，好比 p、h一、em、a，甚至能夠是 html 自己：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

 

二、分組選擇器

 h2, p {color:gray;}

 h2 元素和段落都有灰色

 

三、通配符選擇器

 

 * {color:red;}

 使文檔中的每一個元素都爲紅色：

 

四、類選擇器

 

類選擇器容許以一種獨立於文檔元素的方式來指定樣式。

該選擇器能夠單獨使用，也能夠與其餘元素結合使用。

.important {color:red;}
p.important {color:red;}
只有引用了important類的段落顯示爲紅色文本
.important.warning {silver;}
同時包含important和warning類的元素

五、ID 選擇器

 

#intro {font-weight:bold;}
類選擇器和 ID 選擇器多是區分大小寫的
 
六、屬性選擇器 
6.1簡單屬性選擇
 [title] {color:red;}
 把包含標題（title）的全部元素變爲紅色
 a[href] {color:red;}
 對有 href 屬性的錨（a 元素）應用樣式
 a[href][title] {color:red;}
 同時有 href 和 title 屬性的 HTML 超連接的文本設置爲紅色
6.2根據具體屬性值選擇
 a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}   將指向 Web 服務器上某個指定文檔的超連接變成紅色   與簡單屬性選擇器相似，能夠把多個屬性-值選擇器連接在一塊兒來選擇一個文檔。   a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
6.3屬性與屬性值必須徹底匹配
 <p class="important warning">This paragraph is a very important warning.</p>    p[class="important warning"]   根據部分屬性值選擇   p[class~="important"] {color: red;}   class 屬性中包含 important 的元素
6.4子串匹配屬性選擇器

  
  
  
  
     
   
   
   
   
 
    
 
     
 
 
     
 
 
    
 
    
 
     
 
      
 
       
 
        
 
         
類型
 
         
描述
 
        
 
        
 
         
[abc^="def"]
 
         
選擇 abc 屬性值以 "def" 開頭的全部元素
 
        
 
        
 
         
[abc$="def"]
 
         
選擇 abc 屬性值以 "def" 結尾的全部元素
 
        
 
        
 
         
[abc*="def"]
 
         
選擇 abc 屬性值中包含子串 "def" 的全部元素
 
        
 
       
 
      
 
 
 
     
 
 
    
 
   
 
  
  
  
  
七、後代選擇器
 h1 em {color:red;}
 只對 h1 元素中的 em 元素應用樣式
八、子元素選擇器
 h1 > strong {color:red;}
 這個規則會把第一個 h1 下面的 strong 元素變爲紅色，可是第二個 strong 不受影響：
 <h1>This is <strong>very</strong> important.</h1>
 <h1>This is <em>really <strong>very</strong></em> important.</h1>
九、相鄰兄弟選擇器
 h1 + p {margin-top:50px;}
 增長緊接在 h1 元素後出現的段落的上邊距
 這個選擇器讀做：「選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素」。
 li + li {font-weight:bold;}
 上面這個選擇器只會把列表中的第二個和第三個列表項變爲粗體。第一個列表項不受影響。
 
十、僞類

  
  
  
  
     
   
   
   
   
 
    
 
     
屬性 
 
     
描述
 
    
 
    
 
     
:active 
 
     
向被激活的元素添加樣式。
 
    
 
    
 
     
:focus
 
     
向擁有鍵盤輸入焦點的元素添加樣式
 
    
 
    
 
     
:hover
 
     
當鼠標懸浮在元素上方時，向元素添加樣式。
 
    
 
    
 
     
:link
 
     
向未被訪問的連接添加樣式。
 
    
 
    
 
     
:visited
 
     
向已被訪問的連接添加樣式。 
 
    
 
    
 
     
:first-child
 
     
向元素的第一個子元素添加樣式。
 
    
 
    
 
     
:lang
 
     
向帶有指定 lang 屬性的元素添加樣式。
 
    
 
   
 
  
  
  
  
 
十一、僞元素

  
  
  
  
     
   
   
   
   
 
    
 
     
屬性
 
     
描述
 
    
 
    
 
     
:first-letter
 
     
向文本的第一個字母添加特殊樣式。
 
    
 
    
 
     
:first-line
 
     
向文本的首行添加特殊樣式
 
    
 
    
 
     
:before
 
     
在元素以前添加內容。
 
    
 
    
 
     
:after
 
     
在元素以後添加內容。
 
    
 
   
 
  
  
  
  
容CSS選擇器，因此學會CSS選擇器之後能夠而後入手jquery選擇器基本上沒有什麼門檻