網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3基礎(chǔ)-CSS的選擇器_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3基礎(chǔ)-CSS的選擇器_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3基礎(chǔ)-CSS的選擇器_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3基礎(chǔ)-CSS的選擇器_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開(kāi)發(fā)（第7版）課件：CSS3基礎(chǔ)-CSS的選擇器_第5頁(yè)
已閱讀5頁(yè)，還剩83頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

本節(jié)介紹CSS的選擇器。選擇器（selector）也被稱(chēng)為選擇符，CSS選擇器用于指明樣式對(duì)哪些元素生效。

CSS3基礎(chǔ)CSS的選擇器目錄

CSS3基礎(chǔ)4.1CSS設(shè)計(jì)與編寫(xiě)原則4.2在HTML中使用CSS的方法4.3CSS的兩個(gè)主要特性4.4CSS的基本語(yǔ)法4.5CSS的選擇器4.6屬性值的寫(xiě)法和單位4.7HTML文檔結(jié)構(gòu)與元素類(lèi)型4.8實(shí)訓(xùn)——制作內(nèi)容詳情頁(yè)習(xí)題44.5CSS的選擇器4.5.1元素選擇器元素選擇器的格式如下：E{property1:value1;property2:value2;...}例如，下面定義為網(wǎng)頁(yè)設(shè)置默認(rèn)字體。body,p,div,blockquote,td,th,dl,ul,ol{font-family:Verdana,Arial,Helvetica;font-size:1em;color:black;}4.5CSS的選擇器4.5.2通配符選擇器在編寫(xiě)代碼時(shí)，用“*”表示通配符選擇符。其格式為：*{property1:value1;property2:value2;...}例如，代碼如下：*

{margin:0px;/*外邊距設(shè)置為0*/padding:0px;/*內(nèi)邊距設(shè)置為0*/}4.5CSS的選擇器【例4-7】通配符選擇器示例。本例文件4-7.html在瀏覽器中顯示的效果如圖4-10所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>通配符選擇器</title><styletype="text/css">*{color:#000;}/*所有文字的顏色為黑色*/p{color:#00f;}/*段落文字的顏色為藍(lán)色*/p*{color:#f00;}/*段落子元素文字的顏色為紅色*/</style></head><body><div><h3>通配符選擇器</h3><div>默認(rèn)的文字顏色為黑色</div><p>段落文字顏色為藍(lán)色</p><p>段落<span>段落子元素的文字顏色為紅色</span>段落</p></div></body></html>4.5CSS的選擇器4.5.3屬性選擇器屬性選擇器的格式如下：E[attribute]{property1:value1;property2:value2;...}4.5CSS的選擇器4.5CSS的選擇器【例4-8】屬性選擇器示例，本例文件4-8.html在瀏覽器中顯示的效果如圖4-11所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>屬性選擇器示例</title><styletype="text/css">img[alt]{border:3pxsolid#00F;}/*作用任何帶alt屬性的img元素*/a[href][title]{font-weight:bold;}/*作用同時(shí)帶href和title屬性的a元素*/a[href=""][title="淘寶"]{font-size:18px;}/*作用地址指向并且title為"淘寶"的a元素*/a[title~="baidu"]{color:red;}*[lang\|="en"]{color:blue;}p[title^="my"]{color:yellow;}p[title$="Test"]{color:green;}p[title\*="est"]{background-color:aqua;}</style></head>4.5CSS的選擇器<body><p><imgsrc="images/tulip.jpg"alt="郁金香"width="200"height="120"><imgsrc="images/tulip.jpg"width="200"height="120"></p><ahref=""title="淘寶">淘寶網(wǎng)</a><ahref="/"title="wwwbaiducom">紅色</a><!--標(biāo)簽a的title屬性包含3個(gè)值（多個(gè)值使用空格分隔），其中一個(gè)為baidu，因此可匹配樣式。--><plang="en">E[attribute\|=value]屬性值選擇器</p><plang="en-US">E[attribute\|=value]屬性值選擇器</p><ptitle="myTest">E[attribute^=value]屬性值子串選擇器</p><ptitle="myTest">E[attribute$=value]屬性值子串選擇器</p><ptitle="myTest">E[attribute\*=value]屬性值子串選擇器</p></body></html>4.5CSS的選擇器4.5.4派生選擇器1.后代選擇器后代選擇器（DescendantSelector）又稱(chēng)為包含選擇器，后代選擇器可以選擇某元素后代的元素，兩個(gè)元素之間的層次間隔可以是無(wú)限的。其格式如下：父元素子元素{

property1:valuel1;property2:value2;...}4.5CSS的選擇器【例4-9】后代選擇器示例，希望只對(duì)h3元素中的em元素應(yīng)用樣式，本例文件4-9.html在瀏覽器中顯示的效果如圖4-12所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>后代選擇器示例</title><styletype="text/css">h3em{color:red;}</style></head><body><h3>HTML5語(yǔ)言<em>基礎(chǔ)</em>知識(shí)</h3><h3>HTML5語(yǔ)言基礎(chǔ)知識(shí)</h3><p>HTML5的標(biāo)簽按功能類(lèi)別分為<em>基礎(chǔ)</em>標(biāo)簽、格式標(biāo)簽、鏈接標(biāo)簽等。</p></body></html>4.5CSS的選擇器2.子元素選擇器其格式如下：父元素>

子元素{property:valuel;property2:value2;...}子選擇器使用了大于號(hào)（子結(jié)合符）。子結(jié)合符兩邊可以有空白符，這是可選的。4.5CSS的選擇器例如，如果希望選擇只作為h3元素子元素的strong元素，可以這樣寫(xiě)：h3>strong{color:red;}如果從右向左讀，選擇器h3>strong可以解釋為“選擇作為h3元素子元素的所有strong元素”。這個(gè)規(guī)則會(huì)把第一個(gè)h3下面的兩個(gè)strong元素變?yōu)榧t色，但是第二個(gè)h3中的strong不受影響：<h3>這是<strong>非常</strong><strong>非常</strong>重要</h3><h3>這是<em>真的<strong>非常</strong></em>重要</h3>4.5CSS的選擇器3.相鄰兄弟選擇器其格式如下：兄弟1+

兄弟2{property:valuel;property2:value2;...}4.5CSS的選擇器例如，如果要把緊接在h3元素后出現(xiàn)的元素段落p改成紅色，可以這樣寫(xiě)：h3+p{color:red;}這個(gè)選擇器讀作：“選擇緊接在h3元素后出現(xiàn)的p段落，h3和p元素?fù)碛泄餐母冈亍薄！纠?-10】相鄰兄弟選擇器示例，本例文件4-10.html在瀏覽器中顯示的效果如圖4-13所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>相鄰兄弟選擇器示例</title><styletype="text/css">h3+p{color:red;}p+p+p{color:blue;}li+li{background-color:aqua;}</style></head><body><p>第零個(gè)段落</p><p>第一個(gè)段落</p><h3>標(biāo)題3</h3><p>第二個(gè)段落</p><!--p相鄰h3，p為紅色--><p>第三個(gè)段落</p><p>第四個(gè)段落</p><!--連續(xù)第3個(gè)p為相鄰--><p>第五個(gè)段落</p><!--也是連續(xù)的第3個(gè)p相鄰-->4.5CSS的選擇器<div><ul><li>咖啡</li><li>茶</li><!--第二個(gè)<li>標(biāo)簽會(huì)選中，因?yàn)樗堑谝粋€(gè)<li>標(biāo)簽緊鄰的<li>標(biāo)簽--><li>可口可樂(lè)</li><!--第三個(gè)<li>標(biāo)簽也會(huì)選中：因?yàn)榈谌齻€(gè)<li>標(biāo)簽的上一個(gè)標(biāo)簽也是<li>標(biāo)簽，也滿(mǎn)足css選擇器li+li{}的條件--></ul><ol><li>面包</li><li>饃</li><LI>漢堡</LI></ol></div></body></html>4.5CSS的選擇器4.5.5兄弟選擇器其格式如下：元素1~

元素2{

property1:value1;property2:value2;...}4.5CSS的選擇器【例4-11】兄弟選擇器示例，本例文件4-11.html在瀏覽器中顯示的效果如圖4-14所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>兄弟選擇器示例</title><styletype="text/css">h3~p{background-color:aqua;}</style></head><body><h3>標(biāo)題3</h3><h2>標(biāo)題2</h2><p>段落一，父元素是body</p><p>段落二，父元素是body</p><div><p>div元素中的段落一，這里p的父元素是div，與h3不是同一個(gè)父元素，不受影響</p><p>div元素中的段落二，這里p的父元素是div，與h3不是同一個(gè)父元素，不受影響</p></div><h2>標(biāo)題2</h2><p>段落三，父元素是body</p></body></html>4.5CSS的選擇器4.5.6id選擇器定義id選擇器時(shí)要在id名稱(chēng)前加上一個(gè)“#”號(hào)。其格式為：E#idValue{propertyl:valuel;property2:value2;...}4.5CSS的選擇器【例4-12】id選擇器示例，本例文件4-12.html在瀏覽器中顯示的效果如圖4-15所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>id選擇器示例</title><styletype="text/css">#title{color:red;}#sub_title{background-color:aqua;}#p_content,#p_titlestrong{color:blue;}p{text-indent:2em;}</style></head>4.5CSS的選擇器<body><h2id="title">CSS3簡(jiǎn)介</h2><pid="p_content">CSS（CascadingStyleSheet，也叫層疊樣式表），簡(jiǎn)稱(chēng)為樣式表，CSS是用于定義如何顯示HTML元素，控制網(wǎng)頁(yè)樣式并將樣式與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。</p><h2id="sub_title">CSS3語(yǔ)法基礎(chǔ)</h2><p>CSS的基本語(yǔ)法由兩部分組成，其格式為：</p><pid="p_title"><strong>selector{property1:value1;property2:value2;...}</strong></p><p>selector被稱(chēng)為選擇器，選擇器決定了樣式定義需要改變的HTML元素。property:value被稱(chēng)為樣式聲明，有一條或多條樣式時(shí)，用冒號(hào)隔開(kāi)，以分號(hào)結(jié)束，包含在一對(duì)大括號(hào)“{}”內(nèi)。</p></body></html>4.5CSS的選擇器4.5.7類(lèi)選擇器類(lèi)選擇器可以為指定class的HTML元素指定樣式。其格式如下：E.classValue{

property1:value1;property2:value2;...}4.5CSS的選擇器【例4-13】class選擇器示例，本例文件4-13.html在瀏覽器中顯示的效果如圖4-16所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>class選擇器示例</title><styletype="text/css">.keynote{background:beige;font-weight:bold;color:blue;}p.important{color:red;}</style></head>4.5CSS的選擇器<body><h2class="keynote">CSS3簡(jiǎn)介</h2><p>CSS（CascadingStyleSheets，也叫層疊樣式單），簡(jiǎn)稱(chēng)為樣式表，CSS是用于定義如何顯示HTML元素，控制網(wǎng)頁(yè)樣式并將樣式與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。</p><h2>CSS3語(yǔ)法基礎(chǔ)</h2><pclass="keynote">CSS的基本語(yǔ)法由兩部分組成，其格式為：</p><pclass="important"><strong>selector{property1:value1;property2:value2;...}</strong></p><p>selector被稱(chēng)為選擇器，選擇器決定了樣式定義需要改變的HTML元素。property:value被稱(chēng)為樣式聲明，有一條或多條樣式時(shí)，用冒號(hào)隔開(kāi)，以分號(hào)結(jié)束，包含在一對(duì)大括號(hào)“{}”內(nèi)。</p></body></html>4.5CSS的選擇器4.5.8偽類(lèi)選擇器偽類(lèi)選擇器的語(yǔ)法格式如下：selector:pseudo-class{

property1:value1;property2:value2;...}selector表示一個(gè)選擇器。pseudo-class表示偽類(lèi)名。4.5CSS的選擇器CSS類(lèi)也可與偽類(lèi)搭配使用。偽類(lèi)選擇器的語(yǔ)法格式如下：selector.class

:pseudo-class{property:value}4.5CSS的選擇器【例4-14】偽類(lèi)的應(yīng)用。當(dāng)鼠標(biāo)懸停在超鏈接的時(shí)候背景色變?yōu)槠渌伾⑶姨砑恿诉吙蚓€，待鼠標(biāo)離開(kāi)超鏈接時(shí)又恢復(fù)到默認(rèn)狀態(tài)，這種效果就可以通過(guò)偽類(lèi)實(shí)現(xiàn)。本例文件4-14.html在瀏覽器中的顯示效果如圖4-17所示。

4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>偽類(lèi)示例</title><styletype="text/css">a:link{color:blue;}/*超鏈接單擊之前是藍(lán)色*/a:visited{color:red;}/*超鏈接單擊之后是紅色*//*鼠標(biāo)懸停是綠色，較大的字體，背景是湖綠色*/a:hover{color:green;font-size:large;background-color:aqua;}/*鼠標(biāo)單擊鏈接，但是不松手的時(shí)候，字體是黑色，背景是藍(lán)紫色*/a:active{color:black;background-color:blueviolet;}input:focus{background-color:yellow;}/*輸入框獲得焦點(diǎn)時(shí)，背景色是黃色*//*列表的第一項(xiàng)元素字體是22px，背景色是淺藍(lán)色*/li:first-child{font-size:22px;background-color:#00FFFF;}</style></head>4.5CSS的選擇器

<body><p>應(yīng)用最為廣泛錨點(diǎn)元素a的幾種狀態(tài)（未訪問(wèn)鏈接狀態(tài)、已訪問(wèn)鏈接狀態(tài)、鼠標(biāo)指針懸停在鏈接上的狀態(tài)和被激活的鏈接狀態(tài)）:<br> <ahref="/"target="_blank">淘寶</a><br/> <ahref="/"target="_top">嗶哩嗶哩</a></p><formaction="login"method="post">

用戶(hù)名：<inputtype="text"name="username"id="username"value=""><br>

密碼：<inputtype="password"name="password"id="password"value=""></form><divid=""><ul><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li></ul><ol><li>面包</li><li>饃</li><li>漢堡</li></ol></div></body></html>4.5CSS的選擇器【例4-15】:first-child偽類(lèi)示例，使用:first-child偽類(lèi)選擇元素的第一個(gè)子元素。本例文件4-15.html在瀏覽器中顯示如圖4-18所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:first-child偽類(lèi)示例</title><styletype="text/css">/*把作為某元素的第一個(gè)子元素的所有p元素設(shè)置為粗體、紅色*/p:first-child{font-weight:bold;color:red;}/*把作為某個(gè)元素（在HTML中肯定是ol或ul元素）第一個(gè)子元素的所有l(wèi)i元素變成大字體、黃色背景*/li:first-child{font-size:large;background-color:yellow;}/*把作為某個(gè)元素第一個(gè)元素的所有b、strong元素變成藍(lán)色*/b:first-child,strong:first-child{color:blue;}</style></head>

4.5CSS的選擇器<body><div><p>世界三大飲料</p><ul><li>刺激興奮的可可</li><li>浪漫<strong>濃郁</strong>的<strong>咖啡</strong></li><li>自然清新的<strong>茶</strong>香</li></ul><p><b>可可、咖啡、茶</b>并稱(chēng)當(dāng)今世界的<b>三大</b>無(wú)酒精飲料，不同文化背景的國(guó)家在<b>飲品</b>選擇方面有著各具特色的偏好。</p></div><p><b>注釋?zhuān)?lt;/b>必須聲明DOCTYPE，這樣:first-child才能在IE中生效。</p></body></html> 4.5CSS的選擇器【例4-16】:lang偽類(lèi)示例。本例文件4-16.html在瀏覽器中顯示如圖4-19所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:lang偽類(lèi)示例</title><styletype="text/css">/*定義對(duì)語(yǔ)言為zh的元素起作用*/:lang(zh){border:1pxsolidred;height:30px;}q:lang(no){quotes:"【""】";}</style></head><body><divlang="zh">定義對(duì)語(yǔ)言為zh的元素起作用</div><div>沒(méi)有指定lang，對(duì)元素不起作用</div><plang="zh">定義對(duì)語(yǔ)言為zh的元素起作用</p><p>文字<qlang="no">段落中的引用的文字</q>文字</p></body></html>

4.5CSS的選擇器4.5.9UI元素狀態(tài)偽類(lèi)選擇器UI元素狀態(tài)偽類(lèi)選擇器的語(yǔ)法格式如下：E[type="元素類(lèi)型屬性值"]:pseudo-class{

property1:value1;property2:value2;...}4.5CSS的選擇器4.5CSS的選擇器1.E:hover、E:active和E:focus偽類(lèi)選擇器例如，關(guān)鍵代碼為：<styletype="text/css">input:focus{outline:1pxsolidred;/*對(duì)所有input元素設(shè)置獲取焦點(diǎn)時(shí)的樣式*/}</style><p><labelfor="name">姓名:</label><inputtype="text"name="name"/></p><p><labelfor="email">郵箱:</label><inputtype="text"name="email"/></p>4.5CSS的選擇器【例4-17】E:hover、E:active和E:focus偽類(lèi)選擇器的應(yīng)用，本實(shí)例文件4-17.html在瀏覽器中運(yùn)行時(shí)，鼠標(biāo)指針經(jīng)過(guò)、鼠標(biāo)單擊（但未松開(kāi)）、鼠標(biāo)獲得焦點(diǎn)（單擊松開(kāi)）在瀏覽器中的顯示效果如圖4-20所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>選擇器E:hover、E:active和E:focus應(yīng)用</title><styletype="text/css">input[type="text"]:hover{/*姓名框，鼠標(biāo)經(jīng)過(guò)（懸停）*/background-color:pink;}input[type="text"]:focus{/*鼠標(biāo)獲得焦點(diǎn)（點(diǎn)擊）并進(jìn)行文字輸入時(shí)*/background-color:#ccc;}input[type="text"]:active{/*鼠標(biāo)按下（按下還未松開(kāi)）*/background-color:yellow;}input[type="password"]:hover{/*密碼框，鼠標(biāo)經(jīng)過(guò)（懸停）*/background-color:red;}</style></head>4.5CSS的選擇器<body><h3>選擇器E:hover、E:active和E:focus</h3><form>

姓名:<inputtype="text"placeholder="請(qǐng)輸入姓名"><br><br>

密碼:<inputtype="password"placeholder="請(qǐng)輸入密碼"></form></body></html>4.5CSS的選擇器2.E:enabled與E:disabled偽類(lèi)選擇器【例4-18】E:enabled與E:disabled偽類(lèi)選擇器的應(yīng)用，本實(shí)例文件4-18.html“可用”和“不可用”在瀏覽器中的顯示效果如圖4-21所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:enabled與E:disabled偽類(lèi)選擇器</title><styletype="text/css">input[type="text"]:enabled{/*可用狀態(tài)*/outline:1pxsolid#63E3FF;}input[type="text"]:disabled{/*不可用狀態(tài)*/background-color:#FFD572;}</style></head><body><form><p><labelfor="enabled">姓名:</label><inputtype="text"name="en"></p><p><labelfor="disabled">學(xué)校:</label><inputtype="text"name="dis"disabled="disabled"></p></form></body></html>4.5CSS的選擇器3.E:read-only與E:read-write偽類(lèi)選擇器【例4-19】E:read-only與E:read-write偽類(lèi)選擇器的應(yīng)用，本實(shí)例文件4-19.html“可讀寫(xiě)”和“只讀”在瀏覽器中的顯示效果如圖4-22所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>read-only與E:read-write偽類(lèi)選擇器</title><styletype="text/css">input[type="text"]:read-write{/*讀寫(xiě)*/outline:1pxsolid#63E3FF;}input[type="text"]:read-only{/*只讀*/background-color:#EEEEEE;}</style></head><body><form><p><labelfor="text1">讀寫(xiě):</label><inputtype="text"name="text1"></p><p><labelfor="text2">只讀:</label><inputtype="text"name="text2"readonly="readonly"></p></form></body></html>4.5CSS的選擇器4.E:checked、E:default和indeterminate偽類(lèi)選擇器【例4-20】E:checked和E:indeterminate偽類(lèi)選擇器的應(yīng)用，本實(shí)例文件4-20.html在瀏覽器中的顯示效果如圖4-23所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:checked和E:indeterminate偽類(lèi)選擇器</title><styletype="text/css">input[type="checkbox"]:checked{outline:2pxsolidgreen;}input[type="radio"]:indeterminate{outline:2pxsolidred;}</style></head><body><h3>E:checked和E:indeterminate偽類(lèi)選擇器</h3><form><p>您的愛(ài)好:<inputtype="checkbox">美食<inputtype="checkbox">健身<inputtype="checkbox">影視<inputtype="checkbox">旅游</p><p>您的性別:<inputtype="radio"name="gender">男<inputtype="radio"name="gender">女</p></form></body></html>4.5CSS的選擇器5.E::selection偽類(lèi)選擇器【例4-21】E::selection偽類(lèi)選擇器的應(yīng)用，本實(shí)例文件4-21.html在瀏覽器中的顯示效果如圖4-24所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">div::selection{background-color:red;/*選中div元素的背景色：紅色*/color:white;/*白色字體*/}p::selection{background-color:orange;/*選中p元素的背景色：橘色*/color:white;/*白色字體*/}</style><body><div>在瀏覽器中選中本行文本，背景色為紅色</div><p>在瀏覽器中選中本行文本，背景色為橘色</p></body></html>4.5CSS的選擇器6.E:invalid和E:valid偽類(lèi)選擇器【例4-22】E:invalid與E:valid偽類(lèi)選擇器的應(yīng)用。本實(shí)例文件4-22.html在瀏覽器中的顯示效果如圖4-25所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:invalid與E:valid偽類(lèi)選擇器</title><styletype="text/css">input[type="email"]:invalid{color:red;}input[type="email"]:valid{color:green;}</style></head><body><h3>E:invalid和E:valid偽類(lèi)選擇器</h3><form><inputtype="email"placeholder="請(qǐng)輸入郵箱"></form></body></html>4.5CSS的選擇器7.E:required與E:optional偽類(lèi)選擇器【例4-23】E:required與E:optional偽類(lèi)選擇器的應(yīng)用，本實(shí)例文件4-23.html在瀏覽器中的顯示效果如圖4-26所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:required與E:optional偽類(lèi)選擇器</title><styletype="text/css">input[type="text"]:required{background:yellow;}input[type="text"]:optional{background:pink;}</style></head><body><h3>E:required與E:optional偽類(lèi)選擇器</h3><form>

姓名:<inputtype="text"placeholder="請(qǐng)輸入姓名"required><br><br>

學(xué)校:<inputtype="text"placeholder="請(qǐng)輸入學(xué)校"></form></body></html>4.5CSS的選擇器8.E:in-range與E:out-of-range偽類(lèi)選擇器【例4-24】E:in-range指定輸入值在該范圍之內(nèi)顯示綠色背景，E:out-of-range指定輸入值超過(guò)限定的范圍顯示紅色背景，本實(shí)例文件4-24.html在瀏覽器中的顯示效果如圖4-27所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:in-range與E:out-of-range偽類(lèi)選擇器</title><styletype="text/css">input[type="number"]:in-range{color:#ffffff;background:green;}input[type="number"]:out-of-range{background:red;color:#ffffff;}</style></head><body><h3>E:in-range與E:out-of-range偽類(lèi)選擇器</h3><inputtype="number"min="0"max="100"value="0"></body></html>4.5CSS的選擇器4.5.10結(jié)構(gòu)偽類(lèi)選擇器偽類(lèi)選擇器的語(yǔ)法格式如下：selector:pseudo-class{

property1:value1;property2:value2;...}4.5CSS的選擇器4.5CSS的選擇器1.:root偽類(lèi)選擇器【例4-25】:root偽類(lèi)選擇器示例。在樣式表中分別定義了:root的背景色和body的背景色。本例文件4-25.html在瀏覽器中的顯示效果如圖4-28所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:root偽選擇器示例</title><styletype="text/css">:root{background-color:gainsboro;}body{background-color:darkgrey;}</style></head><body><h3>2020年編程語(yǔ)言排行</h3><ol><li>Java語(yǔ)言</li><li>C語(yǔ)言</li><li>Python語(yǔ)言</li><li>C++語(yǔ)言</li><li>C#語(yǔ)言</li><li>VisualBasic.NET語(yǔ)言</li><li>JavaScript語(yǔ)言</li></ol></body></html>4.5CSS的選擇器2.:first-child、:last-child、:nth-child、:nth-last-child和:only-child【例4-26】子節(jié)點(diǎn)偽類(lèi)選擇器示例，本例文件4-26.html在瀏覽器中的顯示效果如圖4-29所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:child</title><styletype="text/css">/*定義對(duì)作為其父元素的第一個(gè)子節(jié)點(diǎn)的li元素起作用的CSS樣式*/li:first-child{border:1pxsolidblack;}/*定義對(duì)作為其父元素的最后一個(gè)子節(jié)點(diǎn)的li元素起作用的CSS樣式*/li:last-child{background-color:#aaa;}/*定義對(duì)作為其父元素的第2個(gè)子節(jié)點(diǎn)的li元素起作用的CSS樣式*/li:nth-child(2){color:#888;}/*定義對(duì)作為其父元素的倒數(shù)第2個(gè)子節(jié)點(diǎn)的li元素起作用的CSS樣式*/li:nth-last-child(2){font-weight:bold;}/*定義對(duì)作為其父元素的唯一的子節(jié)點(diǎn)的span元素起作用的CSS樣式*/span:only-child{font-size:30pt;font-family:"隸書(shū)";}</style></head>4.5CSS的選擇器<body><ol><li>Java語(yǔ)言</li><li>C語(yǔ)言</li><li>Python語(yǔ)言</li><li>C++語(yǔ)言</li><li>C#語(yǔ)言</li><li>VisualBasic.NET語(yǔ)言</li><li>JavaScript語(yǔ)言</li></ol><ul><liid="java">Java語(yǔ)言</li><liid="c">C語(yǔ)言</li><liid="python">Python語(yǔ)言</li><liid="cplus">C++語(yǔ)言</li><liid="vb">VisualBasic.NET語(yǔ)言</li><li><spanid="js">JavaScript語(yǔ)言</span></li></ul><span>2023年編程語(yǔ)言排行</span></body></html>4.5CSS的選擇器【例4-27】nth-child和nth-last-child偽類(lèi)選擇器示例。本例文件4-27.html在瀏覽器中顯示如圖4-30所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:nth-child</title><styletype="text/css">/*定義對(duì)作為其父元素的奇數(shù)個(gè)子節(jié)點(diǎn)的li元素起作用的CSS樣式*/li:nth-child(odd){margin:10px;border:2pxdottedblack;}/*定義對(duì)作為其父元素的偶數(shù)個(gè)子節(jié)點(diǎn)的li元素起作用的CSS樣式*/li:nth-child(even){padding:4px;border:1pxsolidblack;}/*定義對(duì)作為其父元素的倒數(shù)第3n+1個(gè)（1、4、7）子節(jié)點(diǎn)的li元素起作用的CSS樣式*/li:nth-last-child(3n+1){border:2pxsolidblack;}</style></head>4.5CSS的選擇器<body><ul><liid="java">Java語(yǔ)言</li><liid="c">C語(yǔ)言</li><liid="python">Python語(yǔ)言</li><liid="cplus">C++語(yǔ)言</li><liid="vb">VisualBasic.NET語(yǔ)言</li><liid="js">JavaScript語(yǔ)言</li></ul></body></html>4.5CSS的選擇器3.:first-of-type、:flast-of-type、:nth-of-type、:nth-last-of-type和:only-of-type【例4-28】偽類(lèi)選擇器示例，本例文件4-28.html在瀏覽器中的顯示效果如圖4-31所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:type</title><styletype="text/css">p{padding:5px;}/*匹配p選擇器，且是與它同類(lèi)型、同級(jí)的兄弟元素中的第一個(gè)的CSS樣式*/p:first-of-type{border:1pxsolidblack;}/*匹配p選擇器，且是與它同類(lèi)型、同級(jí)的兄弟元素中的最后一個(gè)的CSS樣式*/p:last-of-type{background-color:#aaa;}/*匹配p選擇器，且是與它同類(lèi)型、同級(jí)的兄弟元素中的第2個(gè)的CSS樣式*/p:nth-of-type(2){color:#888;}/*匹配p選擇器，且是與它同類(lèi)型、同級(jí)的兄弟元素中的倒數(shù)第2個(gè)的CSS樣式*/p:nth-last-of-type(2){font-weight:bold;}</style></head>4.5CSS的選擇器<body><div>2020年編程語(yǔ)言排行</div><p>No.1</p><p>No.2</p><p>No.3</p><p>No.4</p><hr><div><divid="java">Java語(yǔ)言</div><divid="c">C語(yǔ)言</div><pid="python">Python語(yǔ)言</p><pid="cplus">C++語(yǔ)言</p><pid="vb">VisualBasic.NET語(yǔ)言</p><pid="js">JavaScript語(yǔ)言</p><divid="php">PHP語(yǔ)言</div></body></html>4.5CSS的選擇器4.:empty偽類(lèi)選擇器【例4-29】:empty偽類(lèi)選擇器示例，本例文件4-29.html在瀏覽器中的顯示效果如圖4-32所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:empty</title><styletype="text/css">/*定義對(duì)空元素起作用的CSS樣式*/:empty{border:1pxsolidbrown;height:60px;}</style></head><body><imgsrc="baidu.jpg"alt=""><div></div><div></div><!--有一個(gè)空格，不是空元素，所以不會(huì)顯示--></body></html>4.5CSS的選擇器4.5.11其他偽類(lèi)選擇器1.:target偽類(lèi)選擇器【例4-30】:target偽類(lèi)選擇器示例。單擊導(dǎo)航欄中的菜單，目標(biāo)區(qū)域顯示為黃色背景，本例文件4-30.html在瀏覽器中的顯示效果如圖4-33所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:target</title><styletype="text/css">/*目標(biāo)區(qū)域?yàn)辄S色背景*/:target{background-color:#ff0;}</style></head>

4.5CSS的選擇器<body><pid="menu"><ahref="#groupbuy">團(tuán)購(gòu)</a>|<ahref="#brandmake">品牌</a>|<ahref="#coupon">優(yōu)惠卷</a>|<ahref="#integrationcenter">積分中心</a></p><divid="groupbuy"><h3>團(tuán)購(gòu)</h3><p>今天團(tuán)購(gòu)...</p></div><divid="brandmake"><h3>品牌</h3><p>今日大牌...</p></div><divid="coupon"><h3>優(yōu)惠券</h3><p>100-10元優(yōu)惠券</p></div><divid="integrationcenter"><h3>積分中心</h3><p>您的積分...</p></div></body></html>4.5CSS的選擇器2.:not偽類(lèi)選擇器【例4-31】:not偽類(lèi)選擇器示例，本例文件4-31.html在瀏覽器中的顯示效果如圖4-34所示。4.5CSS的選擇器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:not</title><styletype="text/css">/*將id不是python的列表項(xiàng)顯示為棕色加粗*/li:not(#python){color:brown;font-weight:bold;}</style></head><body><ul><liid="java">Java語(yǔ)言</li><liid="c">C語(yǔ)言</li><liid="python">Python語(yǔ)言</li><liid="cplus">C++語(yǔ)言</li><liid="vb">VisualBasic.NET語(yǔ)言</li><liid="js">JavaScript語(yǔ)言</li></ul></body></html>4.5CSS的選擇器4.5.12偽元素選擇器CSS3為了區(qū)分偽類(lèi)和偽元素，規(guī)定偽類(lèi)用一個(gè)冒號(hào)(:)來(lái)表示，偽元素用兩個(gè)冒號(hào)(::)來(lái)表示。偽元素由雙冒號(hào)和偽元素名稱(chēng)組成。偽元素的語(yǔ)法格式如下：selector::pseudo-element{

property1:value1;property2:value2;...}4.5CSS的選擇器CSS類(lèi)也可以與偽元素配合使用：selector.class::pseudo-element{

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論