![[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>1. 实例演示选择器的优先级,id,class,tag;</title><style>/* 选择器 + 声明块 = 样式规则 *//* 在样式的优先级相同情况下，书写顺序决定优先级 写在后面的样式会覆盖前面的样式*//* 选择器本身优先级大于书写顺序 */#first .active{color: tomato;}h1 {color: red;}h1 {color: violet;}.active {color: teal;}#first {color: tomato;}</style></head><body><h1 class="active" id="first">初次(美好的邂逅)，爱···需要遇见,初次···需要呵护~~~</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"><link rel="stylesheet" href="css/love.css"><title>前端组件样式模块化的原理与实现</title></head><!-- <style>@import url(css/header1.css);@import url(css/main1.css);@import url(css/footer1.css);</style> --><body><header align="center"><h2>如果说浑身充满力量</h2></header><main><h2>是因为雄性激素的膨胀</h2></main><footer align="right">那<strong class="active">雄起</strong>是因为什么~~~</footer><!-- 在根目录创建一个CSS文件夹，在里边创建3个文本header,main,footer,分装入各自的样式，然后统一使用<link rel="stylesheet" href="css/xxx.css">调用 --></body></html>
实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）
