第2章CSS選擇器與相關(guān)特性

1、 第第2 2章章 CSSCSS選擇器與相關(guān)特性選擇器與相關(guān)特性 本章簡介：本章簡介： 通過上一章的學(xué)習(xí)，了解了在網(wǎng)頁設(shè)計(jì)中通過上一章的學(xué)習(xí)，了解了在網(wǎng)頁設(shè)計(jì)中引入引入CSSCSS的意義。引入的意義。引入CSSCSS的核心目的就的核心目的就是實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，是實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原來由將原來由HTMLHTML語言所承擔(dān)的一些與結(jié)構(gòu)語言所承擔(dān)的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由無關(guān)的功能剝離出來，改由CSSCSS來完成。來完成。本章介紹本章介紹CSSCSS是如何工作的。重點(diǎn)介紹是如何工作的。重點(diǎn)介紹CSSCSS的的“選擇器選擇器”這一核心概念，以及相關(guān)這一核心概念

2、，以及相關(guān)的兩個(gè)特性的兩個(gè)特性“繼承繼承”和和“層疊層疊”。 構(gòu)造構(gòu)造CSS規(guī)則規(guī)則2.1基本基本CSS選擇器選擇器2.2在在HTML中使用中使用CSS的方法的方法2.3 復(fù)合選擇器復(fù)合選擇器2.4CSS的繼承特性的繼承特性2.5CSS的層疊特性的層疊特性2.62.1構(gòu)造CSS規(guī)則CSSCSS的作用就是設(shè)置網(wǎng)頁的各個(gè)組成部分的表現(xiàn)形式。因此，的作用就是設(shè)置網(wǎng)頁的各個(gè)組成部分的表現(xiàn)形式。因此，如果把上面的表格換成描述網(wǎng)頁上一個(gè)標(biāo)題的屬性表，可以設(shè)想應(yīng)如果把上面的表格換成描述網(wǎng)頁上一個(gè)標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下：該大致如下：2 2級(jí)標(biāo)題級(jí)標(biāo)題 h2 h2 字體字體: :宋體宋體; ; fo

3、nt-family: 宋體; 大小大小:15:15像素像素; ; font-size:15px; 顏色顏色: :紅色紅色; ; color: red; 裝飾裝飾: :下劃線下劃線 text-decoration: underline; 2.2基本CSS選擇器基本選擇器有標(biāo)記選擇器、類別選擇器、基本選擇器有標(biāo)記選擇器、類別選擇器、IDID選擇器、屬性選選擇器、屬性選擇器、結(jié)構(gòu)偽類選擇器和擇器、結(jié)構(gòu)偽類選擇器和UIUI偽類選擇器偽類選擇器6 6種。種。2.2.1標(biāo)記選擇器一個(gè)一個(gè)HTMLHTML頁面由很多不同的標(biāo)記組成，而頁面由很多不同的標(biāo)記組成，而CSSCSS標(biāo)記選擇器就是聲標(biāo)記選擇器就是聲明哪

4、些標(biāo)記采用哪種明哪些標(biāo)記采用哪種CSSCSS樣式。因此，每一種樣式。因此，每一種HTMLHTML標(biāo)記的名稱都可以標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱。例如，作為相應(yīng)的標(biāo)記選擇器的名稱。例如，p p選擇器就是用于聲明頁面中選擇器就是用于聲明頁面中所有所有標(biāo)記的樣式風(fēng)格。同樣，可以通過標(biāo)記的樣式風(fēng)格。同樣，可以通過h1h1選擇器來聲明頁面中所選擇器來聲明頁面中所有的有的標(biāo)記的標(biāo)記的CSSCSS風(fēng)格。風(fēng)格。 h1 color: red; font-size: 25px; 選擇器 屬性 值 屬性 值 聲明 聲明 CSS標(biāo)記選擇器2.2.2類別選擇器在上一小節(jié)中提到的標(biāo)記選擇器一旦聲明，那么頁面中

5、所有的在上一小節(jié)中提到的標(biāo)記選擇器一旦聲明，那么頁面中所有的相應(yīng)標(biāo)記都會(huì)相應(yīng)地產(chǎn)生變化。例如，當(dāng)聲明了相應(yīng)標(biāo)記都會(huì)相應(yīng)地產(chǎn)生變化。例如，當(dāng)聲明了標(biāo)記為紅色時(shí)，標(biāo)記為紅色時(shí)，頁面中所有的頁面中所有的標(biāo)記都將顯示為紅色。如果希望其中的某一個(gè)標(biāo)記都將顯示為紅色。如果希望其中的某一個(gè)標(biāo)記不是紅色，而是綠色，這時(shí)僅依靠標(biāo)記選擇器是不夠的，還需標(biāo)記不是紅色，而是綠色，這時(shí)僅依靠標(biāo)記選擇器是不夠的，還需要引入類別（要引入類別（classclass）選擇器。）選擇器。類別選擇器 .class color: green; font-size: 20px; 類別選擇器 屬性 值 屬性 值 聲明 聲明 類別名稱 2

6、.2.3ID選擇器IDID選擇器的使用方法跟選擇器的使用方法跟classclass選擇器基本相同，不同之處在于選擇器基本相同，不同之處在于IDID選擇器只能在選擇器只能在HTMLHTML頁面中使用一次，因此其針對(duì)性更強(qiáng)。在頁面中使用一次，因此其針對(duì)性更強(qiáng)。在HTMLHTML的的標(biāo)記中只需要利用標(biāo)記中只需要利用idid屬性，就可以直接調(diào)用屬性，就可以直接調(diào)用CSSCSS中的中的IDID選擇器。選擇器。ID選擇器 #id color: yellow; font-size: 30px; ID選擇器 屬性 值 屬性 值 聲明 聲明 2.2.4屬性選擇器在在HTMLHTML中，通過各種各樣的屬性，可以給

7、元素增加很多附加信中，通過各種各樣的屬性，可以給元素增加很多附加信息。例如，通過息。例如，通過font-familyfont-family屬性，可以指定文字的字體，通過屬性，可以指定文字的字體，通過idid屬屬性，可以將不同的性，可以將不同的divdiv元素進(jìn)行區(qū)分，并且通過元素進(jìn)行區(qū)分，并且通過JavaScriptJavaScript來控制這來控制這個(gè)個(gè)divdiv元素的內(nèi)容和狀態(tài)。元素的內(nèi)容和狀態(tài)。CSS 3.0CSS 3.0新增加了新增加了3 3個(gè)屬性選擇器。這個(gè)屬性選擇器。這3 3個(gè)屬性選擇器與個(gè)屬性選擇器與CSS 2.1CSS 2.1中已經(jīng)定義的中已經(jīng)定義的4 4個(gè)屬性選擇器共同構(gòu)成

8、了個(gè)屬性選擇器共同構(gòu)成了CSSCSS的功能強(qiáng)大的標(biāo)簽屬性的功能強(qiáng)大的標(biāo)簽屬性過濾體系。過濾體系。選擇器說 明Eatt=val選擇匹配E的元素，且該元素定義了att屬性，att屬性值包含前綴為val的子字符串。注意，E選擇符可以省略，表示可匹配任意類型的元素例如：bodylang=en匹配 ，而不匹配Efoo$=val選擇匹配E的元素，且該元素定義了att屬性，att屬性值包含后綴為val的子字符串。注意，E選擇符可以省略，表示可匹配任意類型的元素例如：imgsrc$=jpg匹配，而不匹配Efoo*=val選擇匹配E的元素，且該元素定義了att屬性，att屬性值包含val的子字符串。注意，E選擇

9、符可以省略，表示可匹配任意類型的元素例如：imgsrc$=jpg匹配，而不匹配2.2.5結(jié)構(gòu)偽類選擇器結(jié)構(gòu)偽類選擇器也是結(jié)構(gòu)偽類選擇器也是CSS 3CSS 3新增的選擇器之一。結(jié)構(gòu)偽類是利用新增的選擇器之一。結(jié)構(gòu)偽類是利用文檔結(jié)構(gòu)樹實(shí)現(xiàn)元素過濾，也就是說，通過文檔結(jié)構(gòu)的相互關(guān)系來文檔結(jié)構(gòu)樹實(shí)現(xiàn)元素過濾，也就是說，通過文檔結(jié)構(gòu)的相互關(guān)系來匹配特定的元素，從而減少文檔內(nèi)對(duì)匹配特定的元素，從而減少文檔內(nèi)對(duì)classclass屬性和屬性和IDID屬性的定義，使屬性的定義，使文檔更加簡潔。文檔更加簡潔。選擇器說 明E:root選擇匹配E所在文檔的根元素。注意，在 (X)HTML文檔中，根元素就是html

10、元素，此時(shí)該選擇器與html選擇器匹配的內(nèi)容相同E:nth-child(n)選擇所有在其父元素中的第n個(gè)位置的匹配E的子元素提示：參數(shù)n可以是數(shù)字（1、2、3）、關(guān)鍵字（odd、even）、公式（2n、2n+3），參數(shù)的索引起始值為1，而不是0例如：tr:nth-child(3)匹配所有表格里排第3行的tr元素 tr:nth-child(2n+1)匹配所有表格的奇數(shù)行 tr:nth-child(2n)匹配所有表格的偶數(shù)行 tr:nth-child(odd)匹配所有表格的奇數(shù)行 tr:nth-child(even)匹配所有表格的偶數(shù)行E:nth-last-child(n)選擇所有在其父元素中倒數(shù)

11、第n個(gè)位置的匹配E的子元素提示：該選擇器的計(jì)算順序與E:nth-child(n)相反，但語法和用法相同E:nth-of-type(n)選擇父元素中第n個(gè)位置，且匹配E的子元素提示：所有匹配E的子元素被分離出來單獨(dú)排序。非E的子元素不參與排序。參數(shù)的取值與E:nth-child(n)相同例如：p:nth-of-type(2)匹配片段中的第2個(gè)p元素，但不匹配片段中位于第2個(gè)位置的p元素E:nth-last-of-type(n)選擇父元素中倒數(shù)第n個(gè)位置，且匹配E的子元素提示：該選擇器的計(jì)算順序與E:nth-of-type(n)相反，但語法和用法相同E:last-child選擇位于其父元素中最后一

12、個(gè)位置，且匹配E的子元素例如：h1:last-child匹配片段中h1元素E:first-of-type選擇在其父元素中匹配E的第一個(gè)同類型的子元素提示：該選擇器的功能類似于E:nth-of-type(1)例如：p:first-of-type匹配片段中的第1個(gè)p元素E:last-of-type選擇在其父元素中匹配E的最后一個(gè)同類型的子元素提示：該選擇器的功能類似于E:nth-last-of-type(1)例如：p:last-of-type匹配片段中的第2個(gè)p元素E:only-child選擇其父元素只包含一個(gè)子元素，且該子元素匹配E例如：p:only-child匹配片段中的p元素，但不匹配 片段

13、中的p元素E:only-of-type選擇其父元素只包含一個(gè)同類型的子元素，且該子元素匹配E例如：p:only-of-type匹配片段中的p元素，也匹配 片段中的p元素E:empty選擇匹配E的元素，且該元素不包含子節(jié)點(diǎn)提示：文本也屬于節(jié)點(diǎn)2.2.6UI偽類選擇器UIUI偽類選擇器也是偽類選擇器也是CSS 3CSS 3新增選擇器之一。選擇器的共同特征是：新增選擇器之一。選擇器的共同特征是：指定的樣式只有當(dāng)元素處于某種狀態(tài)時(shí)才起作用，在默認(rèn)狀態(tài)下不指定的樣式只有當(dāng)元素處于某種狀態(tài)時(shí)才起作用，在默認(rèn)狀態(tài)下不起作用。起作用。CSS 3CSS 3共定義了共定義了1111種種UIUI元素狀態(tài)偽類選擇器，

14、分別是元素狀態(tài)偽類選擇器，分別是E:hoverE:hover、E:activeE:active、E:focusE:focus、E:enabledE:enabled、E:disabledE:disabled、E:read-onlyE:read-only、E:read-writeE:read-write、E:checkedE:checked、E:defaultE:default、E:indeterminateE:indeterminate和和E:selectionE:selection。這些元素中只有。這些元素中只有3 3種比較常用。種比較常用。選擇器說 明E:enabled選擇匹配E的所有可用U

15、I元素提示：在網(wǎng)頁中，UI元素一般是指包含在form元素內(nèi)的表單元素例如：input:enabled匹配片段中的文本框，但不匹配該片段中的按鈕E:disabled選擇匹配E的所有不可用UI元素提示：在網(wǎng)頁中，UI元素一般是指包含在form元素的表單元素例如：input:disabled匹配片段中的按鈕，但不匹配該片段中的文本框E:checked選擇匹配E的所有處于選中狀態(tài)的UI元素提示：在網(wǎng)頁中，UI元素一般是指包含在form元素內(nèi)的表單元素例如：input:checked匹配 片段中的單選按鈕，但不匹配該片段中的復(fù)選框2.3在HTML中使用CSS的方法在對(duì)在對(duì)CSSCSS有了大致的了解之后，

16、就可以使用有了大致的了解之后，就可以使用CSSCSS對(duì)頁面進(jìn)行全方對(duì)頁面進(jìn)行全方位的控制。本節(jié)主要介紹如何在位的控制。本節(jié)主要介紹如何在HTMLHTML中使用中使用CSSCSS，包括行內(nèi)式、內(nèi)嵌，包括行內(nèi)式、內(nèi)嵌式、鏈接式和導(dǎo)入式等，最后探討各種方式的優(yōu)先級(jí)。式、鏈接式和導(dǎo)入式等，最后探討各種方式的優(yōu)先級(jí)。2.3.1行內(nèi)式行內(nèi)式是所有樣式方法中最為直接的一種，它直接對(duì)行內(nèi)式是所有樣式方法中最為直接的一種，它直接對(duì)HTMLHTML的標(biāo)的標(biāo)記使用記使用stylestyle屬性，然后將屬性，然后將CSSCSS代碼直接寫在其中。代碼直接寫在其中。行內(nèi)式2.3.2內(nèi)嵌式內(nèi)嵌式樣式表就是將內(nèi)嵌式樣式表就是

17、將CSSCSS寫在寫在與與之間，并且用之間，并且用和和標(biāo)記進(jìn)行聲明。標(biāo)記進(jìn)行聲明。內(nèi)嵌式2.3.3鏈接式鏈接式樣式表是使用頻率最高、鏈接式樣式表是使用頻率最高、也是最為實(shí)用的方法。它將也是最為實(shí)用的方法。它將HTMLHTML頁面頁面本身與本身與CSSCSS樣式風(fēng)格分離為兩個(gè)或者多樣式風(fēng)格分離為兩個(gè)或者多個(gè)文件，實(shí)現(xiàn)了頁面框架個(gè)文件，實(shí)現(xiàn)了頁面框架HTMLHTML代碼與代碼與美工美工CSSCSS代碼的完全分離，使得前期制代碼的完全分離，使得前期制作和后期維護(hù)都十分方便，網(wǎng)站后臺(tái)作和后期維護(hù)都十分方便，網(wǎng)站后臺(tái)的技術(shù)人員與美工設(shè)計(jì)者也可以很好的技術(shù)人員與美工設(shè)計(jì)者也可以很好地分工合作。地分工合作。

18、同一個(gè)同一個(gè)CSSCSS文件可以鏈接到多個(gè)文件可以鏈接到多個(gè)HTMLHTML文件中，甚至可以鏈接到整個(gè)網(wǎng)文件中，甚至可以鏈接到整個(gè)網(wǎng)站的所有頁面中，使網(wǎng)站整體風(fēng)格統(tǒng)站的所有頁面中，使網(wǎng)站整體風(fēng)格統(tǒng)一、協(xié)調(diào)，并且后期維護(hù)的工作量也一、協(xié)調(diào)，并且后期維護(hù)的工作量也大大減少。大大減少。鏈接式2.3.4導(dǎo)入式導(dǎo)入式樣式表與鏈接式樣式表的功能基本相同，只是語法和運(yùn)作方導(dǎo)入式樣式表與鏈接式樣式表的功能基本相同，只是語法和運(yùn)作方式上略有區(qū)別。采用式上略有區(qū)別。采用importimport方式導(dǎo)入的樣式表，在方式導(dǎo)入的樣式表，在HTMLHTML文件初始化時(shí)，文件初始化時(shí)，會(huì)被導(dǎo)入到會(huì)被導(dǎo)入到HTMLHTML文

19、件內(nèi)，作為文件的一部分，類似內(nèi)嵌式的效果。而鏈文件內(nèi)，作為文件的一部分，類似內(nèi)嵌式的效果。而鏈接式樣式表則是在接式樣式表則是在HTMLHTML的標(biāo)記需要格式時(shí)才以鏈接的方式引入。的標(biāo)記需要格式時(shí)才以鏈接的方式引入。在在HTMLHTML文件中導(dǎo)入樣式表，常用的有如下幾種文件中導(dǎo)入樣式表，常用的有如下幾種importimport語句，可以語句，可以選擇任意一種放在選擇任意一種放在與與標(biāo)記之間。標(biāo)記之間。import url(sheet1.css);import url(sheet1.css);import url(sheet1.css);import url(sheet1.css);import

20、url(sheet1.css);import url(sheet1.css);import sheet1.css;import sheet1.css;import sheet1.css;import sheet1.css;import sheet1.css;import sheet1.css;2.4復(fù)合選擇器2.32.3節(jié)介紹了節(jié)介紹了3 3種基本的選擇器，以這種基本的選擇器，以這3 3種基本選擇器為基礎(chǔ)，通過種基本選擇器為基礎(chǔ)，通過組合，還可以產(chǎn)生更多種類的選擇器，實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能，組合，還可以產(chǎn)生更多種類的選擇器，實(shí)現(xiàn)更強(qiáng)、更方便的選擇功能，復(fù)合選擇器就是由基本選擇器通過不同的連

21、接方式構(gòu)成的。復(fù)合選擇器就是由基本選擇器通過不同的連接方式構(gòu)成的。復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器，通過不同連接方式而成的復(fù)合選擇器就是兩個(gè)或多個(gè)基本選擇器，通過不同連接方式而成的選擇器。選擇器。2.4.1交集選擇器交集選擇器由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元交集選擇器由兩個(gè)選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集。其中第素范圍的交集。其中第1 1個(gè)必須是標(biāo)記選擇器，第個(gè)必須是標(biāo)記選擇器，第2 2個(gè)必須是類別選擇器個(gè)必須是類別選擇器或者是或者是IDID選擇器。這兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫。選擇器。這兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫。這種方式構(gòu)成的

22、選擇器，將選中同時(shí)滿足前后二者定義的元素，也這種方式構(gòu)成的選擇器，將選中同時(shí)滿足前后二者定義的元素，也就是前者所定義的標(biāo)記類型，并且指定了后者的類別或者就是前者所定義的標(biāo)記類型，并且指定了后者的類別或者idid的元素，因的元素，因此被稱為交集選擇器。例如，聲明了此被稱為交集選擇器。例如，聲明了p p、.special.special和和p.specialp.special這這3 3種選種選擇器。擇器。 h3.class color: red; font-size: 23px; 選擇器 屬性 值 屬性 值 聲明 聲明 標(biāo)記 類別名稱 標(biāo)記類別選擇器交集選擇器示意圖2.4.2并集選擇器與交集選擇器

23、相對(duì)應(yīng)，還有一種并集選擇器，或者稱為與交集選擇器相對(duì)應(yīng)，還有一種并集選擇器，或者稱為“集體聲集體聲明明”。它的結(jié)果是同時(shí)選中各個(gè)基本選擇器所選擇的范圍。任何形式的。它的結(jié)果是同時(shí)選中各個(gè)基本選擇器所選擇的范圍。任何形式的選擇器（包括標(biāo)記選擇器、選擇器（包括標(biāo)記選擇器、classclass選擇器、選擇器、IDID選擇器等）都可以作為并選擇器等）都可以作為并集選擇器的一部分。集選擇器的一部分。并集選擇器是由多個(gè)選擇器通過逗號(hào)連接而成的。在聲明各種并集選擇器是由多個(gè)選擇器通過逗號(hào)連接而成的。在聲明各種CSSCSS選擇器時(shí)，如果某些選擇器的風(fēng)格是完全相同的，或者部分相同，就可選擇器時(shí)，如果某些選擇器的

24、風(fēng)格是完全相同的，或者部分相同，就可以利用并集選擇器同時(shí)聲明風(fēng)格相同的以利用并集選擇器同時(shí)聲明風(fēng)格相同的CSSCSS選擇器。選擇器。并集選擇器示意圖2.4.3后代選擇器在在CSSCSS選擇器中，還可以通過嵌套的方式對(duì)特殊位置的選擇器中，還可以通過嵌套的方式對(duì)特殊位置的HTMLHTML標(biāo)記進(jìn)標(biāo)記進(jìn)行聲明，如當(dāng)行聲明，如當(dāng)與與之間包含之間包含標(biāo)記時(shí)，就可以使用后標(biāo)記時(shí)，就可以使用后代選擇器進(jìn)行相應(yīng)的控制。后代選擇器的寫法就是把外層的標(biāo)記寫在前代選擇器進(jìn)行相應(yīng)的控制。后代選擇器的寫法就是把外層的標(biāo)記寫在前面，內(nèi)層的標(biāo)記寫在后面，之間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層面，內(nèi)層的標(biāo)記寫在后面，之間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層的標(biāo)記就稱為外層標(biāo)記的后代。的標(biāo)記就稱為外層標(biāo)記的后代。嵌套選擇器2.5CSS的繼承特性本節(jié)進(jìn)一步講解后代選擇器的應(yīng)用，它將會(huì)貫穿在所有的設(shè)計(jì)中。本節(jié)進(jìn)一步講解后代選擇器的應(yīng)用，它將會(huì)貫穿在所有的設(shè)計(jì)中。若之前學(xué)過面向?qū)ο笳Z言，那么對(duì)于繼承（若之前學(xué)過面向?qū)ο笳Z言，那么對(duì)于繼承（InheritanceInheritance）的概念一定）的概念一定不會(huì)陌生。在不會(huì)陌生。在CSSCSS中的繼承并沒有像在中的繼承并沒有像在C+C+和和JavaJava等語言中那么復(fù)雜，簡等語言中