![[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
选择器有id class tag 三种
id代表千位
class代表百位
tag代表个位
其中!improtant是最高级别，忽略权重
下面演示权重递归
为了方便演示，代码顺序采用倒序，以免同位选择器因为读写顺序产生歧义
<!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>权重和伪类选择器</title><link rel="stylesheet" tyep="text/css" href="0321.css" /></head><body><ul class="item" id="title"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li><li>列表7</li><li>列表8</li><li>列表9</li><li>列表10</li><li>列表11</li><li>列表12</li><li>列表13</li></ul></body></html>
/* 添加一个id */#title li {background-color: brown;}/* 添加class */.item li {background-color: blueviolet;}/* 两个标签 */ul li {background-color: bisque;}/* 一个标签 */li {border: 1px solid;background-color: aquamarine;}
伪类选择器
伪类选择器以’：’开头，常用的有first-child last-child nth-of-type(n+b) nth-first-of-type last-of-type 奇数odd 偶数even 等组合
以下是演示css
li {border: 1px solid;}/* 选择第一个 */ul > li:first-child {background-color: aquamarine;}/* 选择最后一个 */ul > li:last-child {background-color: brown;}/* 选择第三个 */ul > li:nth-of-type(3) {background-color: bisque;}/* 选择倒数第三个 */ul > li:nth-last-of-type(3) {background-color: bisque;}/* 前三个 */ul > li:nth-of-type(-n + 3) {background-color: red;}/* 最后三个 */ul > li:nth-last-of-type(-n + 3) {background-color: blue;}/* 奇数行 */ul > li:nth-last-of-type(odd) {background-color: blueviolet;}/* 偶数行 */ul > li:nth-last-of-type(even) {background-color: gray;}