Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版） 課件 5.1.4技能點(diǎn)1三種基本選擇器的使用

三種基本選擇器的使用信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備建立網(wǎng)頁內(nèi)容1使用標(biāo)記選擇器2使用類選擇器3使用ID選擇器4建立網(wǎng)頁內(nèi)容前端技術(shù)開發(fā)01任務(wù)目標(biāo)制作HTML頁面，展示杜甫的《登高》1標(biāo)題變紅色2將第一句詩變綠色3將第二句詩、第三句詩都變棕色

建立網(wǎng)頁內(nèi)容前端技術(shù)開發(fā)01輸入網(wǎng)頁內(nèi)容<divalign="center"><h1>登高</h1><h3>杜甫</h3><pid="p1">風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。</p><pclass="p2">無邊落木蕭蕭下，不盡長江滾滾來。</p><pclass="p2">萬里悲秋常作客，百年多病獨(dú)登臺(tái)。</p><p>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</p></div>使用標(biāo)記選擇器前端技術(shù)開發(fā)02需求：將h1標(biāo)題變?yōu)榧t色<divalign="center"><h1>登高</h1><h3>杜甫</h3><pid="p1">風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。</p><pclass="p2">無邊落木蕭蕭下，不盡長江滾滾來。</p><pclass="p2">萬里悲秋常作客，百年多病獨(dú)登臺(tái)。</p><p>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</p></div><style>h1{color:red;}</style>使用類選擇器前端技術(shù)開發(fā)03<divalign="center"><h1>登高</h1><h3>杜甫</h3><pid="p1">風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。</p><pclass="p2">無邊落木蕭蕭下，不盡長江滾滾來。</p><pclass="p2">萬里悲秋常作客，百年多病獨(dú)登臺(tái)。</p><p>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</p></div><style>.p2{color:orange;}</style>需求：將第二句詩、第三句詩都變棕色使用ID選擇器前端技術(shù)開發(fā)04<divalign="center"><h1>登高</h1><h3>杜甫</h3><pid="p1">風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。</p><pclass="p2">無邊落木蕭蕭下，不盡長江滾滾來。</p><pclass="p2">萬里悲秋常作客，百年多病獨(dú)登臺(tái)。</p><p>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</p></div><style>#p1{color:green;}</style>需求：將第一句詩變綠色小結(jié)前端技術(shù)開發(fā)05<style>/*標(biāo)記選擇器*/h1{color:red;}/*類選擇器*/.p2{color:orange;}/*ID選擇器*/#p1{color:green;}</style>CSS基礎(chǔ)選擇器包括標(biāo)簽選擇器、類選擇器、ID選擇器和通配選擇器。在使用時(shí)，需要注意以下幾點(diǎn)：避免濫用標(biāo)簽選擇器，因?yàn)樗鼤?huì)影響頁面中所有該標(biāo)簽的元素。類選擇器是最常用的選擇器之一，可以同時(shí)應(yīng)用于多個(gè)元素，并且可以重用。ID選擇器用于唯一性，每個(gè)ID在文檔中必須是唯一的。選擇器優(yōu)先級(jí)：ID選擇器>類