HTML5+CSS3網(wǎng)頁設(shè)計實例教程-第8章-CSS3選擇器

1、第8章 CSS3選擇器本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述為了使用CSS給元素設(shè)置樣式，需要指定該元素。輸入CSS選擇器，就可以在DOM中指定特定的元素。使用CSS3選擇器，可以用非常短的標(biāo)記清晰和靈活地指定元素。而且，新元素狀態(tài)偽類還允許突出顯示動態(tài)的狀態(tài)變化。第3頁本章的學(xué)習(xí)目標(biāo)掌握選擇器的基礎(chǔ)知識了解CSS3特性選擇器第4頁主要內(nèi)容8.1 選擇器概述8.2 選擇器8.3 CSS3選擇器8.4 瀏覽器支持8.5 選擇器的未來8.6 應(yīng)用實例8.7 本章小結(jié)第5頁8.1 選擇器概述W3C Selectors Level 3模塊在2011年9月成為一個推薦標(biāo)準(zhǔn)。它列出了所有的選擇器，

2、將近40個，不只是CSS3中的選擇器。這是因為，CSS3并不是一個全新的規(guī)范，而是建立在CSS 1 和 CSS 2.1的基礎(chǔ)上。第6頁主要內(nèi)容8.1 選擇器概述8.2 選擇器8.3 CSS3選擇器8.4 瀏覽器支持8.5 選擇器的未來8.6 應(yīng)用實例8.7 本章小結(jié)第7頁8.2 選擇器要影響文本呈現(xiàn)的屬性，可以使用樣式規(guī)則將這些屬性應(yīng)用于元素。使用不同類型的“選擇器”(selector)指定哪些元素可以應(yīng)用某一樣式規(guī)則。其實有多個方式可以實現(xiàn)該目的，而并非僅能通過元素名稱（這類選擇器被稱為“簡單選擇器”)，或者使用class特性及id特性的值進(jìn)行指定。接下來將詳細(xì)介紹各種選擇方式。第8頁通用選

3、擇器“通用選擇器”(universal selector)由一個“星號”(*)表示，作用類似于匹配文檔中全部元素類型的通配符。*如果需要將某個規(guī)則應(yīng)用于全部元素，則可以使用此選擇器。某些時候它還被用于設(shè)置應(yīng)用于整個文檔的默認(rèn)值(如font-family和font-size)，除非使用更為具體的選擇器指定某一元素中對應(yīng)的相同屬性應(yīng)使用其他值。第9頁類型選擇器“類型選擇器”(type selector)匹配所有在由逗號分隔的列表中指定的元素。它使你能夠?qū)⑾嗤囊?guī)則應(yīng)用于多個元素。例如，如果需要將相同的規(guī)則應(yīng)用于不同尺寸的標(biāo)題元素，下面的規(guī)則將匹配所有h1、h2以及h3元素：h1, h2, h3 類

4、選擇器“類選擇器”(class selector)能夠?qū)⒁?guī)則與一個(或多個)包含class特性的元素相匹配，該特性的值匹配你在類選擇器中指定的值。例如，假設(shè)你擁有一個元素，其class特性的值為BackgroundNote，如下所示：This paragraph contains an aside.第10頁id選擇器第11頁“id選擇器”(id selector)與類選擇器的工作方式很類似，只是它作用于id特性。在id特性值前需要使用一個“#”號。因此，一個id特性值為abstract的元素，可以使用如下選擇器進(jìn)行標(biāo)識：#abstract子選擇器“子選擇器”(child selector)匹配

5、某一元素的直接子元素。在下面的例子中，它匹配元素中的任何作為其直接子元素的元素。兩個元素的名稱使用一個“大于號”()分隔，指明b是td的子元素，此處該符號稱為“連接符”(combinator)：tdb 第12頁后代選擇器“后代選擇器”(descendant selector)匹配一種元素類型，該元素為另一指定元素的后代元素(或者說嵌套于另一指定元素內(nèi))，而并非僅僅是直接子元素。盡管大于號被用于作為子選擇器的連接符，但是后代選擇器的連接符卻是空格。查看以下示例：table b 第13頁相鄰兄弟選擇器“相鄰兄弟選擇器”(adjacent sibling selector)匹配一種作為其他元素相鄰兄

6、弟的元素類型。例如，如果希望使任何一級標(biāo)題后的第一個段落與其他元素采用不同樣式，可以通過類似如下方式使用相鄰兄弟選擇器，僅為元素后出現(xiàn)的第一個元素指定規(guī)則：h1+p 第14頁一般兄弟選擇器“一般兄弟選擇器”(general sibling selector)匹配其他元素的兄弟元素類型。不過，該元素不必是直接前方相鄰的元素。因此，假設(shè)有兩個元素同時都是元素的兄弟元素，則都會使用如下選擇器指定的規(guī)則。h1p 第15頁子選擇器與兄弟選擇器的用途子選擇器與相鄰兄弟選擇器都很重要，因為它們能夠減少在HTML文檔中需要添加的class特性的數(shù)量。如果決定將每個元素后的前兩個元素以粗體顯示，就需要回過頭為每

7、個元素后的第二個元素添加一個新的class特性。因此，子元素選擇器與相鄰兄弟選擇器為設(shè)置文檔樣式以及使標(biāo)記更加簡潔，增加了很大的靈活性。第16頁特性選擇器特性選擇器能夠在選擇器中使用元素所包含的特性及其取值。有多種特性選擇器可供使用，它們使以復(fù)雜方式選擇文檔中的元素成為可能。第17頁使用特性選擇器的頁面效果第18頁主要內(nèi)容8.1 選擇器概述8.2 選擇器8.3 CSS3選擇器8.4 瀏覽器支持8.5 選擇器的未來8.6 應(yīng)用實例8.7 本章小結(jié)第19頁8.3 CSS3選擇器組合器特性和子串選擇器UI元素狀態(tài)偽類Target偽類結(jié)構(gòu)偽類偽元素否定偽類組合器假定讀者以前使用過CSS，就肯定遇到過組

8、合器。讀者肯定知道后繼選擇器，該選擇器有這個名稱，是因為它們會選擇出給定元素在文檔樹中的子元素。簡言之，后繼組合器可以選擇出一個元素中某元素類型的所有實例，例如article p .。第20頁特性和子串選擇器如果給定的特性存在，最基本的特性選擇器就允許設(shè)置元素的樣式?！癝tarts with” 子串特性選擇器“ends with” 子串特性選擇器“Contains” 子串特性選擇器第21頁UI元素狀態(tài)偽類大多數(shù)窗體元素都可以啟用、禁用或選中。使用UI元素狀態(tài)偽類，可以在這些元素處于特定狀態(tài)時選擇它們，例如選中的復(fù)選框。下面介紹基本的登錄窗體，看看如何實現(xiàn)這些元素狀態(tài)偽類。第22頁正常樣式的登錄

9、窗體Target偽類CSS3引入了新的:target偽類。在選中的元素成為鏈接的活動目標(biāo)(指向它的URL的片段標(biāo)識符)時，就可以使用:target。第23頁使用CSS3的:target偽類建立帶選項卡的界面結(jié)構(gòu)偽類:first-child:last-child:nth-child:nth-last-child:only-child:first-of-type第24頁:last-of-type:nth-of-type:nth-last-of-type:only-of-type :empty:root偽元素前面簡要介紹了:first-letter偽元素，CSS3給偽元素引入了新的雙冒號語法(:)，

10、以區(qū)分它們和偽類。這個新語法應(yīng)用于CSS 1和CSS2中的如下偽元素：:first-letter :first-line:before :after進(jìn)一步研究偽元素第25頁否定偽類最后要介紹的選擇器是否定偽類:not()。在許多方面，它的工作方式與其他選擇器相反，因為它允許選擇不匹配選擇器的參數(shù)的元素，但它的實用性是相同的你可能會愈來愈多地使用它。一個主要示例是給不是Submit按鈕的所有窗體輸入設(shè)置樣式：第26頁第27頁主要內(nèi)容8.1 選擇器概述8.2 選擇器8.3 CSS3選擇器8.4 瀏覽器支持8.5 選擇器的未來8.6 應(yīng)用實例8.7 本章小結(jié)8.4 瀏覽器支持CSS3選擇器在IE9+

11、、Firefox 3.5+、Chrome 4+、Safari 4+和Opera 10+上獲得了完全的支持。IE6、IE7和IE8不支持CSS3選擇器，IE7和IE8支持一般同級組合器、:first-child和所有特性選擇器，但使用內(nèi)置的JavaScript或jQuery庫編寫填充物程序，就可以解決這個問題。第28頁第29頁主要內(nèi)容8.1 選擇器概述8.2 選擇器8.3 CSS3選擇器8.4 瀏覽器支持8.5 選擇器的未來8.6 應(yīng)用實例8.7 本章小結(jié)第30頁8.5 選擇器的未來盡管本書介紹了CSS3，但CSS4已經(jīng)有了。它是選擇器的規(guī)范。Selectors Level 4 Module當(dāng)前仍是草案，且會定期更新。盡管CSS4還處于其早期階段，且會有很大的修訂，但會從選擇器規(guī)范中刪除一些選擇器，并添加一些選擇器。刪除的選擇器包括偽元素，因為它們會放在其他規(guī)范中。第31頁主要內(nèi)容8.1 選擇器概述8.2 選擇器8.3 CSS3選擇器8.4 瀏覽器支持8.5 選擇器的未來8.6 應(yīng)用實例8.7 本章小結(jié)8.6 應(yīng)用實例第32頁CSS的簡單應(yīng)用的頁面瀏覽效果第33頁主要內(nèi)容8.1 選擇器概述8.2 選擇器8.3 CSS3選擇器8.4 瀏覽器支持8.5 選擇器