CSS样式表优先级及模块化原理及实现
16lz
2021-03-26
CSS样式表优先级原则
优先级相同时,书写顺序决定优先级
选择器本身优先级大于书写顺序
样式声明优先级: id > class > tag
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!-- 内部样式,仅作用于该文档 -->
<style>
/* 样式声明优先级: id > class > tag */
/* 1,1,0 */
#str.abc {
color: violet;
}
/* 1,0,0 */
#str {
color: gold;
}
/* 0,1,0 */
.act {
color: tomato;
}
/* 选择器本身优先级大于书写顺序 */
/* 类样式 */
/* 0,0,2 */
body h1 {
color: green;
}
/* 优先级相同时,书写顺序决定优先级 */
/* 0,0,1 */
h1 {
color: red;
}
</style>
</head>
<body>
<h1>HELLO WORLD</h1>
<!-- 行内样式的优先级要高于style标签设置的内部样式 -->
<h1 style="color: blue">HELLO WORLD</h1>
<h1 class="act">HELLO WORLD</h1>
<h1 class="act" id="str">HELLO WORLD</h1>
<h1 class="abc" id="str">HELLO WORLD</h1>
</body>
</html>
样式表模块化实例
网站大量网页所共用的CSS样式表,推荐采用模块化书写方式,统一单独文件编写存储,在需要的网页文件中链接引用。
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<header>页头</header>
<main>主体</main>
<footer>页脚</footer>
</body>
</html>
css/index.css文件:
header {
background-color: lightblue;
height: 5em;
color: #fff;
}
footer {
background-color: lightblue;
height: 5em;
color: red;
}
main {
background-color: orange;
height: 10em;
}
更多相关文章
- CSS:选择器优先级、前端组件样式模块化原理实现、常用伪类选择器
- css选择器优先级、伪类选择器的使用和模块化样式
- 代码中的Thread.sleep(0) 有什么意义?是写错了吗?
- 210322 CSS 样式与选择器
- 【CSS入门】学习CSS盒模型及常用样式属性详解(整理)
- 10 个最佳实践来改良你的 CSS
- CSS学习(一)
- CSS选择器讲解
- 样式选择器、组件模块化及伪类选择器的用法演练