实例演示选择器的优先级,id>class>tag
<!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>
外部css引入方式indx.css
@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.css
.menu :first-of-type {background-color: lightgreen;}.menu :last-of-type {background-color: lightseagreen;}.login :only-of-type {background-color: lightslategrey;color: white;}