收藏
PHPz批改狀態(tài)：合格
老師批語：看得出一直很認(rèn)真，繼續(xù)加油
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>10.20作業(yè)</title><!-- 要求：--><!-- 1. 實(shí)例演示權(quán)重的原理與計算方式 --><!-- 2. 實(shí)例演示結(jié)構(gòu)偽類,通過位置關(guān)系匹配子元素--><style>.show>h3{color: #2D93CA;}body>pre#a1{color: chocolate;}</style></head><body><h3>作業(yè)一：1. 實(shí)例演示權(quán)重的原理與計算方式</h3><pre id="a1">權(quán)重規(guī)則:1. 實(shí)體標(biāo)記: id, class, tag2. 排列順序: id, class, tag3. 記數(shù)方式: 選擇器中的實(shí)體標(biāo)記數(shù)量</pre><div class="show"><h3>演示：</h3>body>pre#a1{color: chocolate;} >>> 權(quán)重是：(1,0,2) 計算方式：#a1表示id=1, 本次沒有class標(biāo)簽 class=0 body和pre屬于標(biāo)簽，也就tag=2<hr>.show>h3{color: #2D93CA;} >>> 權(quán)重是：(0,1,1) 計算方式：無id .show = class為1 h3 = tag為1，所以（0,1,1）=>(id，class,tag)</div><h3>作業(yè)二： 2. 實(shí)例演示結(jié)構(gòu)偽類,通過位置關(guān)系匹配子元素</h3><ul><li class="his">item-1</li><li class="his">item-2</li><li class="his">item-3</li><li class="his">item-4</li><li class="his">item-5</li></ul><style>/*獲取第4個標(biāo)簽改為綠色*/ul>li:nth-of-type(4){background-color: green;}/*獲取最后一個標(biāo)簽改為藍(lán)色 切結(jié)last-of-type不要加括號，沒有值*/ul>li:last-of-type{background-color: dodgerblue;}/*! :nth-of-type(an + b)* 1. a: 系數(shù), [0,1,2,3,...]* 2. n: 參數(shù), [0,1,2,3,...]* 3. b: 偏移量, 從0開始? 規(guī)則: 計算出來的索引,必須是有效的(從1開始)/*獲取前面三個item1~item3，字體顏色改為紅色*/ul>li:nth-of-type(-n+3){color: red;}/*!*獲取第一個，字體顏色改為黃色*!*/ul>li:nth-of-type(1){color: yellow;}</style></body></html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號