CSS學習(四)CSS選擇符詳解

 

CSS屬性和選擇符

css的文法結構僅僅有三部分組成：選擇符（Selector）、屬性（property）、和值（value）。
使用方法：
selector {Property:value;}

選擇符（Selector）指這組樣式編碼所要針對的對象，可以是一個XHTML標籤，如body,h1；也可以是定義了特定的ID或CLASS的標籤，如#main選擇符表示選擇<div id="main">，即一個被指定了main為id的對象。瀏覽器將對css選擇符進行嚴格的解析，每一組樣式均會被瀏覽器應用到對應的對象上。

屬性（Property）是CSS樣式控制的核心，對於每一個XHTML中的標籤，CSS都提供了豐富的樣式屬性，如顏色、大小、定位、浮動方式等。

值（value）是指屬性的值，形式有兩種，一種是指定範圍的值，如float屬性，只可能應用left，right，none三種值，如width能夠使用0-9999它，或其它數學單位來指定。

在實際應用中，我們往往使用以下類似的應用形式：
body {background-color:blue;}

類型選擇符

在上邊的body{}便是一種類型選擇符。所謂類型選擇符，是指以網頁中已有的標籤類型作為名稱的選擇符，body是網頁中的一個標籤類型，div也是，span也是。因此以下選擇符都是類型選擇符，而它們將控制頁面中所有的body或div或span：
　　body{}
　　div{}
　　span{}

群組選擇符

除了對單個XHTML進行樣式指定，同樣可以對一組對象進行相同的樣式指派
h1,h2,h3,p,span{font-size:12px; font-family:arial;}
使用逗號對選擇符進行分隔，使得頁面中所有的h1,h2,h3,p,span都將具有相同的樣式定義。這樣做的好處是對於頁面中需要使用同樣式的地方只需要書寫一次樣式表即可實現，減少代碼量，改善css代碼的結構。

包含選擇符

h1 span{font-weight:bold;}
當我們僅僅想對某一個對象中的子物件進行樣式指定時，包含選擇符就派上用場。包含選擇符指選擇符組合中前一個對象包含後一個對象，對象之間使用空格作為個分隔字元。如本例子所示。我們對h1下面的span進行樣式指派，最後應用到XHTML是如下的格式：
<h1>這是我們的一段文本<span>這是span內的文本</span></h1>
<h1>單獨的h1</h1>
<span>單獨的span</span>
<h2>被h2標籤套用的文本<span>這是h2下的span</span></h2>
h1標籤之下的span標籤將被應用font-weight:bold的樣式設定。注意，僅僅對有此結構的標籤有效，對於單獨存在的h1或單獨存在的span及其他非h1標籤下屬的span均不會應用此樣式。
這樣做能夠協助我們避免過多的ID及CLASS的設定，直接對所需設定的過猶不及進行設定。
包含選擇符除了可以二者包含，也可以多級包含，如以下選擇符樣式同樣能夠作用：
body h1 span stront{ font-weight=bold;}

標籤指定式選擇符

如果既想使用id或class，也想同時使用標籤選擇符，可以使用如下格式：
h1#content {}
表示針對所有id為content的h1標籤。
h1.p1 {}
表示針對所有class為p1的h1標籤。
標籤指定式選擇符在對標籤選擇的精確度上介於標籤選擇符及id/class選擇符之間，也是一種經常使用到的選擇符形式。

組合選擇符

對於上述所有CSS選擇符而言，無論是什麼樣的選擇符，均可以進行組合使用。
h1 .p1 {}
表示h1標籤下的所有class為p1的標籤。
#content h1{}
表示id為content的標籤下的所有h1標籤。
h1.p1,#content h1{}
以上兩種進行群組選擇。
h1#content h2{}
id為content的h1標籤下的h2標籤。