css選擇器分類與作用


本文旨在總結css中各種選擇器及其相應用途(持續更新)

 


通配符(全局)選擇器

樣式:*{}

示例:

總結:選定文檔中所有類型的對象,如圖所示寫在css樣式文件開頭用來定義全局通用的一些屬性。font-family:定義三種基本的字體類型;marginpadding:將內外邊距歸零,以防與之后樣式發生沖突;

font-size:定義基本字號。

 

元素(類型)選擇器

樣式:E{}

示例:

首先編寫如下內容:三段文字用了不同的類型定義

然后用元素選擇器對需要的類型加上紅色效果:

顯示結果:

 現將元素類型從P修改為h3

顯示結果:

總結:不僅僅是文字,任何元素類型都可以用該選擇器查找,讀者可以嘗試其他類型的效果。類型選擇器在css樣式中使用程度非常高,通常與其他類型選擇器嵌套使用,復合型元素查找后文會給出心得。

 

id選擇器

樣式:#(id名){}

示例:

這次三段文字定義相同類型,不同的是給他們加上不同的id:

給要選中的文字加上金黃色效果:

顯示結果:

接下來我們想去選中第三段文字:

 

顯示效果:

總結:需要牢牢記住的是一個id在一個樣式文檔中只能存在一個,重復的話程序會報錯。正是由於id的這種唯一性,在選擇元素時復合選擇器的最外層通常運用父級最近的id名。id選擇器在html文件中不易定義過多,通常在編寫頁面時定義較大的塊級,諸如:header、showcase、mainbody、sidebody、bottom、footer等。

 

類選擇器

樣式:.A{}

示例:有三段文字,我們給第一、二段加上類名,第三段沒有類名

現對類名為“content”的加入樣式:

得到結果:

 

總結:沒有類名或者類名不同的均不會被選中並加入樣式。在實際編寫代碼時,可以先寫編寫一些CSS樣式,之后對想要加入該樣式的元素賦給相應的類名,以達到通用的效果。

 

 

包含(后代)選擇器

樣式:A B{}

示例:現在把三段文字裝進一個div盒子里:

想要選中第一段文字:

顯示結果:

總結:后代選擇器樣式中兩類型名中間用空格隔開,級別從左到右遞減(爺在左 孫在右),可以不必逐級選擇(爺 父 孫),在確定元素不會查找出錯的情況下可以簡寫(爺 孫)。

 

子對象選擇器

樣式:A>B{}

該選擇器與后代選擇器類似,所以不再贅述。不同在於B只能為A的子級,不能跨級選擇。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM