![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：写的不错，很详细！
Collection
Collection
<body><p>元素选择器</p><p class="class-p">类选择器</p><p id="id-p">id选择器</p></body>
<style>p {color: aqua;}.class-p {color: blue;}#id-p {color: brown;}</style>
<body><h2><strong>后代选择器</strong>--父子选择器</h2><p><strong>同级相邻</strong>选择器</p><h3>同级所有选择器</h3><p><strong>同级所有</strong>选择器</p><span>同级所有测试</span><p><strong>同级所有</strong>选择器</p></body>
<style>h2 strong {color: aqua;}body > h2 {color: blueviolet;}h2 + p {color: brown;}h3 ~ p {color: coral;}</style>
:first-child:last-child:nth-child(n):nth-last-child(n)
<body><div class="div1"><h2>匹配第一个子元素</h2><p>匹配第二个子元素</p><p>匹配倒数第二个子元素</p><p>匹配最后一个子元素</p></div><div class="div2"><p>匹配奇偶元素</p><p>匹配奇偶元素</p><p>匹配奇偶元素</p><p>匹配奇偶元素</p></div><div class="div3"><p>匹配指定位置</p><p>匹配指定位置</p><p>匹配指定位置</p><p>匹配指定位置</p><p>匹配指定位置</p><p>匹配指定位置</p></div></body>
<style>.div1 > :first-child {color: coral;}.div1 > :nth-child(2) {color: cornflowerblue;}.div1 > :nth-last-child(2) {color: chartreuse;}.div1 > :last-child {color: crimson;}.div2 > :nth-child(2n) {color: darkblue;}.div2 > :nth-child(2n-1) {color: darkcyan;}.div3 > :nth-child(n + 4) {color: lightblue;}.div3 > :nth-child(-n + 2) {color: lightcoral;}</style>
:first-of-type:last-of-type:nth-of-type(n):nth-last-of-type(n)
<body><div class="div3"><span>分组结构伪类测试</span><p>分组结构伪类第一个</p><p>分组结构伪类</p><p>分组结构伪类第三个</p><span>分组结构伪类测试</span><p>分组结构伪类</p><p>分组结构伪类倒数第二个</p><p>分组结构伪类最后一个</p><span>分组结构伪类测试</span></div></body>
<style>.div3 p:first-of-type {color: blue;}.div3 p:last-of-type {color: blueviolet;}.div3 p:nth-of-type(3) {color: brown;}.div3 p:nth-last-of-type(2) {color: lightcoral;}</style>
:target:focus::selection
<body><a href="#login-form">登录</a><form id="login-form">用户名<input type="text" /></form></body>
<style>form {display: none;}#login-form:target {display: block;}input:focus {color: red;background-color: yellow;}input::selection {color: white;background-color: black;}</style>
:not()::before::after
<body><div class="list"><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ul></div></body>
<style>ul > :not(:nth-child(2)) {background-color: seagreen;}.list > ::before {content: "下面是列表";}.list > ::after {content: "上面是列表";}</style>
