css與文檔關聯起來發揮作用。
css文件中是各種樣式規則,由選擇器和聲名塊構成。聲明塊由多條聲明組成。選擇器是聲明要作用的對象,聲明是對具體規則的描述。
聲明由屬性和值組成,值或是屬性的錯誤都會使該條聲明失效.但是后續的聲明可以繼續發揮作用.一般情況下,屬性值是由關鍵字或是關鍵字列表組成.關鍵字之間通常是空格來分界,但例外是可以在:字體大小/行高格式上使用"/".選擇器分為:通配選擇器、元素選擇器、id選擇器、類選擇器、屬性選擇器、偽類選擇器、偽元素選擇器、后代選擇器、子代選擇器、相鄰兄弟選擇器、普通兄弟選擇器。下面分開說明:
1、元素選擇器
元素是構成文檔的基礎。當然主要是html文檔但是並不限於html,在xml中也可以使用。這自不用說,直接使用元素就是了。
2、通配選擇器
該選擇器使用通配符*,匹配所有的元素。問題在於不要濫用,在特殊性上,它的特殊性位0,但是強過沒有特殊性的繼承的方式。
3、id選擇器和類選擇器
二者獨立於元素,也就是說可以代表了一類條件,而且是區分大小寫的。不同在於:id具有唯一性,不支持多類的多個詞空格的形式。書寫上的差異不表。id會在javascript中建立全局變量。
4、屬性選擇器。該選擇器會依據屬性的特性來選擇元素。分為:簡單屬性選擇器(包含屬性的有無,同常是做校驗使用)、具體屬性選擇器、部分選擇器(~= ^= *= $=)、特殊屬性選擇器(|= 通常用於選擇語言,健壯性不如:lang這個偽元素)。
5、后代選擇器。它是基於良好的文檔結構的。所以良好的文檔結構是非常重要的。直接將元素列出來就可以了。不管嵌套結構有多么深都會使用.
6、子代選擇器。由於子代應用的面太大,需要更加精確地控制方式。子代選擇就出現了。
7、相鄰兄弟選擇器。該選擇器實際上要求比較嚴格,選擇的是元素之后緊鄰的元素,只會是一個。但有時好像選擇了第一個之后的所有,只是因為本是選擇了全部了。例如:ol li + li 會選擇除第一個之后的所有。原因是ol li選擇了所有的li.然后是所有的li選擇兄弟元素。
8、 普通兄弟選擇器.a ~ b.這種方式會更加的寬松,允許間隔,只要有相同的父元素就可以了。
9、偽類與偽元素。二者在元素的文檔中都不會存在,而是由用戶代理(主要是瀏覽器)產生。這是一種幻象的產生方式。偽類::link :visited :focus :hover :active :lang() :first-child :nth-child。偽元素也是由用戶代理來產生的。主要有::first-line :first-letter :after :before等。前兩個主要用於塊級元素,但不會限與塊級元素。但對可用的屬性還是有限制。而且必須在選擇器的最后,如P:first-line em就會出錯。后二者如:after {content:"value";}。