收藏
PHPz批改狀態(tài)：合格
老師批語：可以, 每一期作業(yè)完成的都很認(rèn)真, 繼續(xù)加油
作業(yè)內(nèi)容：
- 實(shí)例演示權(quán)重的原理與計(jì)算方式
- 實(shí)例演示結(jié)構(gòu)偽類,通過位置關(guān)系匹配子元素
試驗(yàn)內(nèi)容：高權(quán)重的CSS樣式會(huì)覆蓋低權(quán)重CSS樣式，即使高權(quán)重的CSS寫在低權(quán)重CSS之前。
html
<body><ul class="list"><li class="li first">item1</li><li class="li">item2</li><li class="li">item3</li><li class="li">item4</li><li class="li">item5</li><li class="li">item6</li><li class="li">item7</li><li class="li">item8</li></ul></body>
css
li {color: red;}
效果
修改css
ul li {color: blue;}li {color: red;}
效果
最終顏色為藍(lán)色的原因是：ul li的權(quán)重高于li。
兩個(gè)選擇器權(quán)重的計(jì)算：
權(quán)重的表示是(id的數(shù)量, class的數(shù)量, tag的數(shù)量)，ul和li都是標(biāo)簽，因此ul li的權(quán)重是(0, 0, 2)，li的權(quán)重是(0, 0, 1)。前者的權(quán)重大于后者的權(quán)重，所以最終的顏色是藍(lán)色。
同理，如果修改css
.first {color: red;}ul li {color: blue;}
效果
這是因?yàn)?code>.first的權(quán)重是(0, 1, 0)，而ul li的權(quán)重是(0, 0, 2)，前者權(quán)重大于后者，因此item1呈現(xiàn)紅色。
html
<ul class="list"><li class="li first">item1</li><li class="li">item2</li><li class="li">item3</li><li class="li">item4</li><li class="li">item5</li><li class="li">item6</li><li class="li">item7</li><li class="li">item8</li></ul>
匹配第一個(gè)
.list > li:first-of-type {background-color: lightgreen;}
效果
匹配最后一個(gè)
.list > li:last-of-type {background-color: lightgreen;}
效果
a=1是正向匹配
匹配全部
.list > li:nth-of-type(n) {background-color: lightgreen;}
效果
從第五個(gè)開始獲取
.list > li:nth-of-type(n + 5) {background-color: lightgreen;}
效果
a=-1是反向匹配
匹配前五個(gè)
.list > li:nth-of-type(-n + 5) {background-color: lightgreen;}
效果
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)