批改状态:合格
老师批语:
html内容
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="style2.css"></head><body><h1><!-- 权重(0,0,2) --><div>实例测试一</div><!-- 权重(0,1,0) --><div class="test">实例测试二</div><!-- 权重(1,0,0) --><div id="test">实例测试三</div><!-- important无视权重 --><div id="test" class="test2">实例测试四</div></h1></body></html>
style2.css内容
h1 {color: aqua;}#test {color: blue;}.test {color: purple;}.test2 {color: brown !important;}

关系式::nth-of-type(an+b),其中a与b为人为赋值,n为自增函数(0,1,2,3....).(a为系数,b为偏移量)从头开始计数为: :nth-of-type()从后面开始计数为: :nth-last-of-type()偶数行实现样式::nth-last-of-type(even)奇数行实现样式::nth-last-of-type(odd)
html内容
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>伪类选择器</title><style>@import url("css/selector-fake.css");</style></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li><li>item11</li><li>item12</li><li>item13</li><li>item14</li><li>item15</li><li>item16</li><li>item17</li><li>item18</li></ul></body></html>
selector-fake.css内容
.list>li:nth-of-type(3n+2) {background-color: violet;}/* 当n=0,1,2,3,4,5时,具体的表现结果 */

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号