這里向大家描述一下CSS選擇器中子選擇器、相鄰同胞選擇器與屬性選擇器的用法，通過這幾種選擇器可以搞定很多東西，為它們找到目標。在CSS布局網(wǎng)頁開發(fā)中，我們還會用到一常非常有用的選擇器，可以用它來進行整體布局聲明，這就是通用選擇器。

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)瑯琊免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

CSS選擇器中子選擇器、相鄰同胞選擇器與屬性選擇器

在前面的文章中我們講了《類型選擇器與后代選擇器等》，通過這兩種選擇器可以搞定很多東西，為它們找到目標。在CSS布局網(wǎng)頁開發(fā)中，我們還會用到一常非常有用的選擇器，可以用它來進行整體布局聲明，這就是通用選擇器?？聪旅娴拇a：

ExampleSourceCode

 
 
 

  
  
  
*{ 
  
  
  
margin:0; 
  
  
  
padding:0; 
  
  
  
} 
  
  
  

 
 
 

　　這種形式的代碼一般不會多次出現(xiàn)，在頁面代碼中出現(xiàn)一次而已，但它的功能是非常強大的，在計算機領域中一般情況下都約定“*”為通配符，它的聲明將會作用于頁面中所有的可用元素，使用它可以定義一些頁面中基本的規(guī)則，如邊距margin、填充padding、字體font-family、文字大小font-size、背景顏色background-color等等。

　　由于某些瀏覽器不支持或支持的不夠好，下面所介紹的三種選擇器并不是非常的常用，至少目前的情況是這樣的，但隨著時間的推移，某些功能還是非常有用的，我們簡單了解一下子選擇器、相鄰同胞選擇器與屬性選擇器。

子選擇器

　　請注意這個CSS選擇器與后代選擇器的區(qū)別，子選擇器（childselector）僅是指它的直接后代，或者你可以理解為作用于子元素的***個后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇，我們看下面的代碼：

ExampleSourceCode

CSS：

 
 
 

  
  
  
#linksa{color:red;} 
  
  
  
#links>a{color:blue;} 
  
  
  

 
 
 

HTML：

 
 
 

  
  
  

  
  
  
Div+CSS教程>
  
  
  
CSS布局實例
  
  
  
CSS2.0教程
  
  
  

 
 
 

　　我們將會看到***個鏈接元素“Div+CSS教程”會顯示成藍色，而其它兩個元素會顯示成紅色。當然，或許你的瀏覽器并不支持這樣的CSS選擇符。我們在一開始也強調(diào)了不太兼容的現(xiàn)狀。

相鄰同胞選擇器

　　我們除了上面CSS選擇器的子選擇器與后代選擇器，我們可能還希望找到兄弟兩個當中的一個，如一個標題h1元素后面緊跟了兩個段落p元素，我們想定位***個段落p元素，對它應用樣式。我們就可以使用相鄰同胞選擇器?？聪旅娴拇a：

ExampleSourceCode

CSS

 
 
 

  
  
  
h1+p{color:blue} 
  
  
  
HTML 
  
  
  
52CSS.com是一個非常專業(yè)的CSS站點
  
  
  
在52CSS.com的Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識。
  
  
  
在52CSS.com的CSS布局實例中，有很多與CSS布局有關(guān)的案例。
  
  
  

 
 
 

　　我們將會看到***個段落“在的Div+CSS教程中，介紹了很多關(guān)于CSS網(wǎng)頁布局的知識?！蔽淖诸伾珜撬{色。而第二段則不受此CSS樣式的影響。

屬性選擇器

　　這個CSS選擇器也有點復雜，在實際應用中對于新手來說還很遙遠，它是根據(jù)某個屬性是否存在或?qū)傩缘闹祦碚业侥繕嗽?，是一個非常有意思的功能，如果能做到靈活運用，其效果也會非常強大。關(guān)于這一塊的知識我們以后在52CSS.com的文章中詳細說明。

本文名稱：解析三大CSS選擇器使用
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/ccisceh.html