Web前端開(kāi)發(fā) 課件 第7章 CSS選擇器VIP

第7章CSS選擇器主講教師：朱鐵櫻《Web前端開(kāi)發(fā)》思維導(dǎo)圖

7.1基礎(chǔ)選擇器標(biāo)簽選擇器是指用HTML標(biāo)簽名稱(chēng)作為選擇器，按標(biāo)簽名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)簽指定統(tǒng)一的CSS樣式。語(yǔ)法格式：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}CSS基礎(chǔ)選擇器有標(biāo)簽選擇器、類(lèi)選擇器、ID選擇器和通配符選擇器。

7.1基礎(chǔ)選擇器類(lèi)選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類(lèi)名。語(yǔ)法格式：.類(lèi)名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

7.1基礎(chǔ)選擇器id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名。#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}語(yǔ)法格式：

7.1基礎(chǔ)選擇器通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}語(yǔ)法格式：作業(yè)1：靜夜思需求說(shuō)明：使用內(nèi)嵌式引入CSS樣式表。分別用標(biāo)簽選擇器、ID選擇器和類(lèi)選擇器實(shí)現(xiàn)以下效果，屬性及屬性值可以更換。交集選擇器又稱(chēng)標(biāo)簽指定式選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為類(lèi)選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，如p#cpp或p.italic。7.2復(fù)合選擇器交集選擇器CSS復(fù)合選擇器包括交集選擇器、并集選擇器和后代選擇器。

7.2復(fù)合選擇器后代選擇器用來(lái)選擇元素或元素組的后代，其寫(xiě)法就是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。后代選擇器

7.2復(fù)合選擇器并集選擇器是各個(gè)選擇器通過(guò)逗號(hào)連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。若某些選擇器定義的樣式完全或部分相同，可利用并集選擇器為它們定義相同的樣式。并集選擇器作業(yè)2—完成實(shí)驗(yàn)項(xiàng)目任務(wù)單制作團(tuán)隊(duì)風(fēng)采頁(yè)面需求說(shuō)明圖片和文本放在段落標(biāo)簽中，標(biāo)題放在<p>標(biāo)簽的子標(biāo)簽<strong>標(biāo)簽中段落標(biāo)簽中的文本字體大小為14px；標(biāo)題字體大小為18px，第一個(gè)標(biāo)題字體顏色為紅色，第二個(gè)標(biāo)題字體顏色為綠色CSS樣式體現(xiàn)出復(fù)合選擇器的應(yīng)用使用鏈接方式引用外部樣式表

思維導(dǎo)圖7.3屬性選擇器屬性選擇器功能描述E[att]選擇匹配具有屬性att的E元素E[att=val]選擇匹配具有屬性att的E元素,并且屬性值為val（其中val區(qū)分大小寫(xiě)）E[att^=val]選擇匹配元素E，且E元素定義了屬性att，其屬性值是以val開(kāi)頭的任意字符串E[att$=val]選擇匹配元素E，且E元素定義了屬性att，其屬性值是以val結(jié)尾的任意字符串E[att*=val]選擇匹配元素E，且E元素定義了屬性att，其屬性值包含了“val”，換句話說(shuō)，字符串val與屬性值中的任意位置相匹配

7.3屬性選擇器E[att]：選擇匹配具有屬性att的E元素

7.3屬性選擇器E[att=val]：選擇匹配具有屬性att的E元素,并且屬性值為val（區(qū)分大小寫(xiě)）

7.3屬性選擇器E[att^=val]：選擇匹配元素E，且E元素定義了屬性att，其屬性值以val開(kāi)頭的任意字符串

7.3屬性選擇器E[att$=val]：選擇匹配元素E，且E元素定義了屬性att，其屬性值以val結(jié)尾的任意字符串

7.3屬性選擇器E[att*=val]：選擇匹配元素E，且E元素定義了屬性att，其屬性值包含了“val”

7.4關(guān)系選擇器選擇器類(lèi)

型功能描述ph2后代選擇器表示選擇p標(biāo)簽的所有h2子標(biāo)簽。p>h2子選擇器表示選擇嵌套在p標(biāo)簽的子標(biāo)簽h2。p+h2相鄰兄弟選擇器表示選擇p標(biāo)簽后緊鄰的第一個(gè)兄弟標(biāo)簽h2。p~h2普通兄弟選擇器表示選擇p標(biāo)簽所有的h2兄弟標(biāo)簽。

7.4關(guān)系選擇器ph2（后代選擇器）表示選擇p標(biāo)簽的所有h2子標(biāo)簽。

7.4關(guān)系選擇器p>h2（子代選擇器）表示選擇嵌套在p標(biāo)簽的子標(biāo)簽h2。

7.4關(guān)系選擇器p+h2（相鄰兄弟選擇器）表示選擇p標(biāo)簽后緊鄰的第一個(gè)兄弟標(biāo)簽h2。

7.4關(guān)系選擇器p~h2（普通兄弟選擇器）表示選擇p標(biāo)簽所有的h2兄弟標(biāo)簽。

7.5偽類(lèi)選擇器CSS偽類(lèi)是用來(lái)添加—些選擇器的特殊效果。由于狀態(tài)的變化是非靜態(tài)的，所以元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類(lèi)的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。偽類(lèi)功能和class類(lèi)似，但它是基于文檔之外的抽象，所以叫偽類(lèi)。偽類(lèi)用冒號(hào)

:

表示，偽類(lèi)名稱(chēng)對(duì)大小寫(xiě)不敏感。

7.5偽類(lèi)選擇器a標(biāo)簽的四種偽類(lèi)選擇器順序?yàn)椋篴:link,a:visited,a:hover,a:active?。必須嚴(yán)格按照此規(guī)則來(lái)設(shè)置屬性，否則效果無(wú)效。:link未訪問(wèn)的超鏈接:visited已訪問(wèn)過(guò)的超鏈接:active鼠標(biāo)移動(dòng)到超鏈接上:hover選定的超鏈接:focus元素獲取焦點(diǎn)

7.5偽類(lèi)選擇器目標(biāo)偽類(lèi)選擇器（:target），用于為頁(yè)面中的某個(gè)target元素（該元素的id被當(dāng)做頁(yè)面中的超鏈接來(lái)使用）指定樣式。只有用戶(hù)單擊了頁(yè)面中的超鏈接，并且跳轉(zhuǎn)到target元素后，該選擇器所設(shè)置的樣式才會(huì)起作用。

7.5偽類(lèi)選擇器第1類(lèi):root元素所在文檔的根元素

:not選擇某個(gè)元素之外的所有元素:empty選擇沒(méi)有子元素的元素，且該元素也不包含任何文本節(jié)點(diǎn)第2類(lèi):fisrt-child:last-child父元素的第一個(gè)子元素父元素的最后一個(gè)子元素:nth-child(n):nth-last-child(n)：父元素的第n個(gè)子元素父元素的倒數(shù)第n個(gè)子元素:only-child父元素的唯一子元素的元素第3類(lèi):nth-of-type(n):nth-last-of-type(n)父元素內(nèi)具有指定類(lèi)型的第n個(gè)元素父元素內(nèi)具有指定類(lèi)型的倒數(shù)第n個(gè)元素:first-of-type:last-of-type父元素內(nèi)具有指定類(lèi)型的第一個(gè)元素父元素內(nèi)具有指定類(lèi)型的最后一個(gè)元素

7.5偽類(lèi)選擇器:root選擇器用于匹配文檔根標(biāo)簽，在HTML中，根標(biāo)簽始終是html。

7.5偽類(lèi)選擇器如果對(duì)某個(gè)結(jié)構(gòu)標(biāo)簽使用樣式，但是想排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓子結(jié)構(gòu)元素不使用這個(gè)樣式，可以使用:not選擇器。

7.5偽類(lèi)選擇器:empty選擇沒(méi)有子元素的元素，且該元素也不包含任何文本節(jié)點(diǎn)。

7.5偽類(lèi)選擇器:first-child選擇器和:last-child選擇器分別用于選擇父元素中的第一個(gè)和最后一個(gè)子元素。

7.5偽類(lèi)選擇器:nth-child(n)和:nth-last-child(n)選擇器是:first-child選擇器和:last-child選擇器的擴(kuò)展。

7.5偽類(lèi)選擇器nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類(lèi)型的第n個(gè)子元素和倒數(shù)第n個(gè)子元素。選中父元素指定類(lèi)型p的第2個(gè)元素選中父元素的第2個(gè)元素

7.6偽元素選擇器:before偽元素選擇器可以在被選元素的內(nèi)容前面插入內(nèi)容，必須配合content屬性來(lái)指定要插入的具體內(nèi)容。<元素>:before{ content:文字/url();}注意：被選元素