0322作业(选择器的优先级,id,class,tag); (前端组件样式模块化的原理与实现); (常用伪类选择器的使用方式,并用伪类来模块化元素组件(例如表单或列表))
Original
487 people have browsed it
选择器的优先级
<!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>
实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
