![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：适当附上图例，记忆更佳
Collection
Collection
<!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></head><style>/* 1,1,1 1个id,1个class,1个tag */h1#hello.hello{color: firebrick;background-color: deepskyblue;}/* 1,0,0 1个id */#hello{background-color: crimson;}/* 0,1,0 1个class */.hello{background-color: cornflowerblue;}/* 0,0,2 2个tag */body h1{color: chocolate;}/* 0,0,1 1个tag */h1{color: chartreuse;}</style><body><h1 id="hello" class="hello">Hello World</h1></body></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></head><style>/* 后代里的第一个元素 <li>item5-1</li> */ul>li ul>li:first-of-type{color: red;}/* 后代里的最后一个元素 <li>item5-3</li> */ul ul>li:last-of-type{color: blue;}/* 2n+1 的计算方式为2*0+1 = 12*1+1 = 32*2+1 = 52*3+1 = 7...所以实际是选中奇数行*/ul>li:nth-of-type(2n+1){color: lightcoral;}/* -n+2 的计算方式为-1*0+2 = 2-1*1+2 = 1-1*2+2 = 0所以实际是选中前2行*/ul>li:nth-of-type(-n+2){background-color: blueviolet;}</style><body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5<ul><li>item5-1</li><li>item5-2</li><li>item5-3</li></ul></li><li>item6</li><li>item7</li><li>item8</li><li>item9</li></ul></body></html>