Web前端開發(fā)技術(shù)與實踐PPT課件

1、Web前端開發(fā)技術(shù)與實踐第第8 8章：選擇器章：選擇器阮曉/ http:/河南中醫(yī)學(xué)院管理信息工程學(xué)科河南中醫(yī)學(xué)院網(wǎng)絡(luò)信息中心2015.91 1河南中醫(yī)學(xué)院 / 阮曉龍 // http:/本章主要內(nèi)容p認識CSS選擇器p基礎(chǔ)選擇器p層次選擇器p偽裝選擇器p屬性選擇器2 2河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.認識CSS選擇器p選擇器是CSS的核心，從最初的元素選擇器、類選擇器、ID選擇器，演進到偽元素、偽類，以及CSS3提供的更為豐富的選擇器，使得定位頁面上的任意元素開始變得愈發(fā)簡單。p在Web前端開發(fā)中，

2、CSS定義著網(wǎng)站最受用戶關(guān)注的前端表現(xiàn)部分，HTML僅展示頁面內(nèi)容，而CSS則定義這網(wǎng)站各個部分的顏色、字體、陰影等。3 3河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1.認識CSS選擇器p在CSS代碼中，只是使用了class屬性區(qū)別其他服務(wù)，而此種方法具有以下兩種缺點：nclass屬性本身并沒有語義，其純粹是為CSS樣式服務(wù)，對于元素來說是多余屬性。n使用class屬性并沒有把樣式與元素綁定起來，針對同一個class屬性，文本框可使用，下拉框也可使用，按鈕也可使用。p根據(jù)CSS3選擇器功能可將選擇器分為四部分：n基礎(chǔ)選擇器、層次選擇器、偽類選擇器、屬性選擇器。4 4

3、河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器p基礎(chǔ)選擇器是CSS中最基礎(chǔ)、最常用的選擇器，從CSS的誕生開始就一直存在，供Web前端開發(fā)者快速的進行DOM元素的查找與定位。pCSS語法由選擇器、屬性和值三部分組成，具體語法如下：5 52.1語法河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器6 62.1語法河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器p“*”在CSS中代表所有，即為通配符選擇器。p通配符選擇器是用來選擇所有元素，同時也可以選擇某個元素下的所有元素。n通配符選擇器用

4、于頁面定義中：n通配符選擇器用于選擇器組合中：n通配符選擇器的一種不常用的方式：7 72.2通配符選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/8 8現(xiàn)場演示：n 案例8-01：通配符選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器p元素選擇器是CSS選擇器中最常見且最基本的選擇器。p元素選擇器其實就是對文檔的元素進行樣式定義，可以為html，body，p，div元素等定義樣式。p使用元素選擇器的優(yōu)點：n快速的將某個樣式從一個元素轉(zhuǎn)移到另一個元素上。n通過元素選擇器可定義頁面中所有使用該元素的樣式，減少CSS代碼的書寫。9

5、 92.3元素選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1010現(xiàn)場演示：n 案例8-02：元素選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器pCSS類選擇器允許選擇網(wǎng)頁元素的類進行樣式表應(yīng)用。類選擇器以“.”符號標識，后面緊跟類名稱。p類選擇器是以一種獨立于文檔元素的方式來指定樣式，使用類選擇器之前必須在HTML元素上定義類名，換句話說需要保證類名在HTML標記中存在，這樣才能選擇類。11112.4類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器p類選擇器還可以結(jié)合元素選

6、擇器來使用。n如有多個元素使用了類名“items”，但只需要在使用類型“items”的li元素上修改樣式，則可將類名稱定義為“l(fā)i.items”。12122.4類選擇器注意： 在網(wǎng)頁中只要網(wǎng)頁元素的class屬性定義為classname，都將會受到該樣式表的影響，而不管它具體是何種類型的網(wǎng)頁元素。 類名稱的第一個字符不能使用數(shù)字，因為它無法在瀏覽器中起作用。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1313現(xiàn)場演示：n 案例8-03：類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器pCSS中的ID選擇器允許選擇網(wǎng)頁元素的I

7、D進行樣式表應(yīng)用，以“#”標識，后面緊跟HTML元素ID名稱。pID選擇器的使用過程：n為某元素建立一個獨有的ID。n使用ID選擇器對該元素進行樣式表應(yīng)用。14142.5 ID選擇器注意：網(wǎng)頁元素的ID是唯一的，對應(yīng)的CSS ID選擇器內(nèi)的樣式表也只能作用于唯一的一個ID元素。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/1515現(xiàn)場演示：n 案例8-04：ID選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2.基礎(chǔ)選擇器16162.6選擇器兼容性基礎(chǔ)選擇器兼容性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選

8、擇器pCSS關(guān)系選擇器是一些基礎(chǔ)選擇器按照一定的關(guān)系進行組合的選擇器組合。p選擇器的關(guān)系使用關(guān)系選擇符表示，關(guān)系選擇符有四個類別：n選擇符、子選擇符、相鄰選擇符、兄弟選擇符p層次選擇器基于HTML中DOM元素之間的層次關(guān)系進行選擇，快速準確的找到相關(guān)元素，并對元素進行樣式定制，p層次選擇器具體語法：17173.1語法河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選擇器p后代選擇器也被稱作包含選擇器，就是可以選擇某元素的后代元素。n比如說E F，前面E為祖先元素，F(xiàn)為后代元素。表達的意思即為選擇了E元素的所有后代F元素。nF不管是E元素的子元素或者是孫元素或者是更

9、深層次的關(guān)系，都將被選中，也就是說，E F將遞歸選中E元素中的所有F元素。18183.2后代選擇器注意：祖先元素和后代元素之間使用一個空格隔開。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選擇器p子選擇器只能選擇某元素的子元素。n比如說EF，其中E為父元素，而F為子元素，其中EF所表示的是選擇了E元素下的所有子元素F。n和后代選擇器（E F）不同，EF僅選擇了E元素下的F子元素，更深層次的F元素則不會被選擇。19193.3子選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2020現(xiàn)場演示：n 案例8-05：后代選擇器與自選擇器河南中

10、醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選擇器p相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且兩者需具有一個相同的父元素。n比如E+F，E和F元素具有一個相同的父元素，而且F元素在E元素后面且緊相鄰，這樣就可以使用相鄰兄弟元素選擇器來選擇F元素。p使用相鄰兄弟選擇器增加緊接在h1元素后段落的上邊距：p相鄰兄弟選擇器還可以結(jié)合其他選擇器進行使用：21213.4相鄰兄弟選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選擇器p通用兄弟元素選擇器是CSS3新增的選擇器，將選擇某元素后面的所有兄弟元素，通用兄弟元素需要在同一個父元素

11、之中。n比如EF，E和F元素是屬于同一父元素之內(nèi)，并且F元素在E元素之后，那么EF選擇器將選擇中所有E元素后面的所有F元素。p通用兄弟選擇器和相鄰兄弟選擇器極其相似，不同的是：n相鄰兄弟選擇器僅選擇元素與其相鄰的后面元素（僅一個元素）。n通用兄弟元素選擇器，選中的是元素后面的所有兄弟元素。22223.5通用兄弟選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/2323現(xiàn)場演示：n 案例8-06：兄弟選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選擇器p層次選擇器實際可以看成是一種選擇器的組合。利用選擇器的組合，可以更加精確的將樣式

12、應(yīng)用到網(wǎng)頁元素，以實現(xiàn)豐富多彩的個性化顯示。p除包含組合之外，還有如下常見的組合：n類型限定類：如div.class ul li 。n雙重組合類：如div.class ul.catlist 。n偽類：如#nav h2 a:hover 。p上述例子只是為了說明選擇器的組合，在實際應(yīng)用中可能會有一定差異。24243.6選擇器組合河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選擇器p在實際應(yīng)用中，應(yīng)善用選擇器組合，可以使CSS文檔更有條理更簡潔。p在實際的應(yīng)用中有一個很重要的概念就是選擇器分組，可以將多個有相同樣式定義的選擇器以逗號進行分組。n上述例子表示將標題h1至

13、h6及div標簽內(nèi)的字體都設(shè)定為14像素。25253.6選擇器組合河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3.層次選擇器26263.7選擇器兼容性層次選擇器兼容性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器pCSS偽類用于向某些選擇器添加特殊的效果，以“:”號表示，且不能單獨存在。p偽類選擇器與類選擇器的區(qū)別：n類選擇器可以自由命名。n偽類選擇器是CSS中已經(jīng)定義好的選擇器，不能隨便命名和定義。p偽類選擇器的語法格式：27274.1語法河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器282

14、84.1語法河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器p動態(tài)偽類并不存在于HTML中，只有當用戶和網(wǎng)站交互的時候才能體現(xiàn)出來，動態(tài)偽類包含兩種：n在鏈接中常看到的錨點偽類，如“:link”和“:visited”。n被稱作用戶行為偽類，如“:hover”“:active”和“:focus”。p常見的錨點偽類的使用如下：29294.2動態(tài)偽類選擇器注意：對于這四個錨點偽類的設(shè)置，需要特別注意就是它們的先后順序。其順序應(yīng)該為link-visited-hoveractive，如果把順序搞錯了，會產(chǎn)生意想不到的錯誤。河南中醫(yī)學(xué)院 / 阮曉龍 / 13938213

15、680 / http:/4.偽類選擇器p用戶行為偽類錨點的含義：n:hover用于當用戶把鼠標移動到元素上面時的效果。n:active用于用戶點擊元素那一下的效果。n:focus用于元素成為焦點，這個經(jīng)常用在表單元素上。30304.2動態(tài)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3131現(xiàn)場演示：n 案例8-07：超鏈接的偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器p目標偽類選擇器“:target”是眾多實用的CSS3新特性中的一個，可以用來匹配HTML的URL中某個標志符的目標元素。n具體來說，URL中的

16、標志符通常會包含一個井號（#），后面帶有一個標志符名稱，例如“#contact”，“:target”就是用來匹配鏈接中包含“#contact”的元素。n在Web頁面中，一些URL擁有片段標識符，它由一個井號（#）后跟一個錨點或元素ID組合而成，可以鏈接到頁面的某個特定元素。p“:target”偽類選擇器選取鏈接的目標元素，然后定義樣式。32324.3目標偽類選擇器注意：選擇器定義的樣式在用戶點擊頁面中的超鏈接并跳轉(zhuǎn)后方起作用。河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3333現(xiàn)場演示：n 案例8-08：target選擇器河南中醫(yī)學(xué)院 / 阮曉龍 / 13938213

17、680 / http:/3434目標偽類和動態(tài)偽類選擇器兼容性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器p使用語言偽類選擇器來匹配使用語言的元素是非常有用的，特別是在多語言版本的網(wǎng)站中，其作用更為明顯。p語言偽類選擇器是根據(jù)元素的語言編碼匹配元素。n這種語言信息必須包含在文檔中或與文檔關(guān)聯(lián)，不能從CSS指定。n為文檔指定語言，有兩種方法可以表示：p如果使用HTML 5，直接可以設(shè)置文檔的語言。p手工在文檔中指定lang屬性，并設(shè)置對應(yīng)的語言值。35354.4語言偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇

18、器pUI元素狀態(tài)偽類選擇器指定的樣式只有當元素處于某種狀態(tài)下才起作用，在默認狀態(tài)下是不起作用的。p在CSS3中，共有11種UI元素狀態(tài)偽類選擇器，分別是：nE:hover、E:active、E:focusnE:enabled、E:disablednE:read-only、E:read-writenE:checked、E:default、E:indeterminatenE:selection36364.5 UI元素狀態(tài)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器pE:hover、E:active、E:focusnE:hover選擇器：指定當鼠標指

19、針移動到元素上面時元素所使用的樣式。nE:active選擇器：指定當元素被激活的樣式，例如鼠標在元素上按下且沒有松開時。nE:focus選擇器：指定元素獲得光標焦點時的樣式，主要是在文本框控件獲得焦點并進行文字輸入的使用。37374.5 UI元素狀態(tài)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/3838現(xiàn)場演示：n 案例8-09：有提示效果的輸入框河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器pE:enabled、E:disablednE:enabled選擇器：指定當元素處于可用狀態(tài)時的樣式。nE:disabled選擇器：

20、指定當元素處于不可用狀態(tài)時的樣式。pE:read-only、E:read-writenE:read-only選擇器：指定當元素處于只讀狀態(tài)時的樣式。nE:read-write選擇器：指定當元素處于非只讀狀態(tài)時的樣式。39394.5 UI元素狀態(tài)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器pE:checked、E:default、E:indeterminatenE:checked選擇器：指定當表單中radia元素或checkbox元素處于選取狀態(tài)下的樣式。nE:default選擇器：指定當頁面打開時默認處于選取狀態(tài)的單選框或復(fù)選框控件的元素樣式。

21、nE:indeterminate選擇器：用來指定當頁面打開時，如果一組單選框中任何一個單選框都沒有被選中時，整組單選框的統(tǒng)一樣式。pE:selectionnE:selection選擇器：指定當元素處于選中狀態(tài)時的樣式。40404.5 UI元素狀態(tài)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4141UI元素偽類選擇器兼容性（1）河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4242UI元素偽類選擇器兼容性（2）河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器prootn用于指定頁面根元素的樣式。所謂根

22、元素，是指位于文檔樹中最頂層結(jié)構(gòu)的元素，在HTML文檔中是指包含著整個頁面的部分。pemptyn用來指定當元素內(nèi)容為空時使用的樣式。43434.6結(jié)構(gòu)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4444現(xiàn)場演示：n 案例8-10：root選擇器n 案例8-11：empty選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器pnth選擇器n:first-childp:first-child是用來選擇某個元素的第一個子元素。n:last-childp:last-child選擇器與:first-child選擇器作用類似，:la

23、st-child選擇是子元素最后一個子元素。n:nth-child()p:nth-child()可以選擇某個元素的一個或多個特定的子元素。n:nth-last-child()p:nth-last-child()選擇器和上面的:nth-child()相似，該選擇器在進行選擇時是從最后一個元素開始計算來選擇特定元素。45454.6結(jié)構(gòu)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器pnth選擇器n:nth-of-type()p:nth-of-type()選擇器類似于:nth-child()選擇器，不同的是僅計算選擇器中指定的元素類型。n:nth-las

24、t-of-type()p:nth-last-of-type()選擇器和:nth-of-type()相似，該選擇器在進行選擇時是從最后一個元素開始計算來選擇特定元素的。46464.6結(jié)構(gòu)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4.偽類選擇器pnth選擇器n:first-of-type和:last-of-typep:first-of-type和:last-of-type選擇器指定了元素類型進行計算。n:only-child和:only-of-typep:only-child選擇器用來指定一個元素是它的父元素的唯一元素。p:only-of-type選擇器用來指

25、定類型的某元素是它的父元素的唯一元素。47474.6結(jié)構(gòu)偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4848現(xiàn)場演示：n 案例8-12：改變列表第一項和最后一項n 案例8-13：選擇偶數(shù)項n 案例8-14：每個2項選擇一項n 案例8-15：改變新聞標題的樣式n 案例8-16：唯一元素的樣式變化河南中醫(yī)學(xué)院 / 阮曉龍 // http:/4949結(jié)構(gòu)偽類選擇器兼容性（1）河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5050結(jié)構(gòu)偽類選擇器兼容性（2）河南中醫(yī)學(xué)院 / 阮曉龍 // ht

26、tp:/4.偽類選擇器p否定選擇器“:not()”是CSS3的新選擇器，類似jQuery中的“:not()”選擇器，主要用來定位不匹配該選擇器的元素。p“:not()”是一個非常有用的選擇器，可以起到過濾內(nèi)容的作用，例如以下選擇器表示選擇頁面中所有元素，除了“footer”元素之外。p有時常在表單元素中使用，舉個實例，給表單中所有input定義樣式，除了submit按鈕之外，此時就可以使用否定選擇器。51514.7否定偽類選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5252現(xiàn)場演示：n 案例8-17：not選擇器河南中醫(yī)學(xué)院 / 阮曉龍 / 1393821368

27、0 / http:/4.偽類選擇器p偽元素選擇器，并不是針對真正元素使用的選擇器，而是針對CSS中已經(jīng)定義好的偽元素使用的選擇器。p在CSS中，主要有四個偽元素選擇器。nfirst-line偽元素選擇器用于為某個元素中的第一行文字使用樣式。nfirst-letter偽元素選擇器用于為某個元素中的文字的首字母使用樣式。在英文中，首字母是第一個英文字符，在中文或日文中，首字母是第一個漢字。nbefore偽元素選擇器用于在某個元素之前插入一些內(nèi)容。nafter偽元素選擇器用于在某個元素之后插入一些內(nèi)容。53534.8偽元素河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5454

28、現(xiàn)場演示：n 案例8-18：first-line選擇器n 案例8-19：first-letter選擇器n 案例8-20：before選擇器n 案例8-21：after選擇器河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5555偽元素選擇器兼容性河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5.屬性選擇器p屬性選擇器主要作用是對帶有指定屬性的HTML元素設(shè)置樣式。p使用CSS3屬性選擇器，可以只指定元素某個屬性，也可同時指定元素的某個屬性和其對應(yīng)的屬性值，其語法如下：p在元素類型匹配時，就可以使用類似正則的匹配方法。natt=val 指定特定名字的元素。natt*=val 匹配val*的元素。natt=val 匹配val開頭的元素，比如id為val1、val432432等。natt$=val 匹配val結(jié)尾的元素，比如id為1213val、fdajlval等。56565.1語法河南中醫(yī)學(xué)院 / 阮曉龍 // http:/5.屬性選擇器pEattrnEattr屬性選擇器是CSS3屬性選擇器中最簡單的一種。n如果希望選擇有某個屬性的元素，而不論這個屬性值是什么，就可以使用此屬性選擇器。