![[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
作业内容：
- 实例演示权重的原理与计算方式
- 实例演示结构伪类,通过位置关系匹配子元素
试验内容：高权重的CSS样式会覆盖低权重CSS样式，即使高权重的CSS写在低权重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;}
效果
最终颜色为蓝色的原因是：ul li的权重高于li。
两个选择器权重的计算：
权重的表示是(id的数量, class的数量, tag的数量)，ul和li都是标签，因此ul li的权重是(0, 0, 2)，li的权重是(0, 0, 1)。前者的权重大于后者的权重，所以最终的颜色是蓝色。
同理，如果修改css
.first {color: red;}ul li {color: blue;}
效果
这是因为.first的权重是(0, 1, 0)，而ul li的权重是(0, 0, 2)，前者权重大于后者，因此item1呈现红色。
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>
匹配第一个
.list > li:first-of-type {background-color: lightgreen;}
效果
匹配最后一个
.list > li:last-of-type {background-color: lightgreen;}
效果
a=1是正向匹配
匹配全部
.list > li:nth-of-type(n) {background-color: lightgreen;}
效果
从第五个开始获取
.list > li:nth-of-type(n + 5) {background-color: lightgreen;}
效果
a=-1是反向匹配
匹配前五个
.list > li:nth-of-type(-n + 5) {background-color: lightgreen;}
效果