本文旨在總結css中各種選擇器及其相應用途(持續更新)
通配符(全局)選擇器
樣式:*{}
示例:

總結:選定文檔中所有類型的對象,如圖所示寫在css樣式文件開頭用來定義全局通用的一些屬性。font-family:定義三種基本的字體類型;margin、padding:將內外邊距歸零,以防與之后樣式發生沖突;
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的子級,不能跨級選擇。
