0322作业
实例演示选择器的优先级,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>
indx.css
@import url(header.css);
@import url(main.css);
@import url(footer.css);
<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" />
<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;
}
更多相关文章
- 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使
- css基础、选择器、模块化组件
- 【CSS入门】CSS基本语法和选择器优先级学习总结简介
- 伪类选择器,优先级,模块化
- CSS选择器优先级、模块化与伪类选择器的原理及应用
- 选择器的优先级,id,class,tag
- CSS选择器优先级+模块化+伪类选择器
- 圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式
- react中的render-props模式