![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction 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><style>/* id选择器，优先级大于class */#first {color: lightblue;}/* 类样式 ,高于标签*/.active {color: grey;}h1 {color: greenyellow;}/* id > class >tag */</style></head><body><h1 class="active" id="first">柒合尚科技</h1></body></html>
<hr/>
<!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" /><link rel="stylesheet" href="css/index.css" /><title>模块化样式表</title><!-- <style>@import url(css/index.css);</style> --></head><body><header>页眉</header><main>主体</main><footer>页脚</footer></body></html>
@import url(header.css);@import url(main.css);@import url(footer.css);
<!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/menu.css);/* 只要获取到页面中某个元素组件的入口，再根据子元素的位置，使用伪类就可以选择任何一个元素 */</style></head><body><nav class="menu"><a href="">首页</a><a href="">视频</a><a href="">下载</a><a href="">注册/登陆</a></nav><hr /><form action="" style="display: grid; gap: irem" class="login"><input type="text" placeholder="UserName" /><input type="password" placeholder="password" /><input type="email" placeholder="demo@email.com" /><button>提交</button></form></body></html>
.menu :first-of-type {background-color: lightgreen;}.menu :last-of-type {background-color: lightseagreen;}.login :only-of-type {background-color: lightslategrey;color: white;}