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

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

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

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

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

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

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

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

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

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

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

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

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

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

型功能描述ph2后代選擇器表示選擇p標(biāo)簽的所有h2子標(biāo)簽。p>h2子選擇器表示選擇嵌套在p標(biāo)簽的子標(biāo)簽h2。p+h2相鄰兄弟選擇器表示選擇p標(biāo)簽后緊鄰的第一個兄弟標(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)簽后緊鄰的第一個兄弟標(biāo)簽h2。

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

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

:

表示，偽類名稱對大小寫不敏感。

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

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

7.5偽類選擇器第1類:root元素所在文檔的根元素

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

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

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

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

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

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

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

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