![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：优先级是不是很有意思呢, 还是有规律的
Collection
Collection
<style>style="..."common. css,JQuery.css, layui.css, <link>引用| 案例 | id | class | tag | 标识 |
|---|---|---|---|---|
html body header h1 |
0 | 0 | 4 | 0, 0, 4 |
body header h1 |
0 | 0 | 3 | 0, 0, 3 |
.page-header .title |
0 | 2 | 0 | 0, 2, 0 |
#page-title |
1 | 0 | 0 | 1, 0, 0 |
html body header h1 > body hedaer h1
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器的优先级</title>
<style>
/ 这里是tag选择器 :html ,head ,body, h1/
/ 属性：color 值：gold /
/ 0,0,4 / id=0,class=0 ,tag=4 /
html body header h1 {
color: gold;
}
/ 这里是选择器 /
/ 0,0,3 / id=0，class=0，tag=3 /
body header h1 {
color: darkred;
}
/ 这里是class选择器，使用class选择器可以实现样式复用 /
.A {
color: saddlebrown;
}
</style></head><body><header class="page-header"><h1 class="title" id="page-title">了解选择器的优先级</h1><!-- class（类）样式可以实现样式复用 --><h2 class="A">css是什么？</h2><p class="A">css是层叠样式表</p><h3 class="A">css不是编程语言</h3></header></body>
</html>`
.page-header .title > body header h1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器的优先级</title>
<style>
/ 这里是选择器 /
/ 0,0,3 / id=0，class=0，tag=3 /
body header h1 {
color: darkred;
}
/ 0,2,0 /
.page-header .title {
color: rgb(18, 12, 31);
}
/ 这里是class选择器，使用class选择器可以实现样式复用 /
.A {
color: saddlebrown;
}
</style></head><body><header class="page-header"><h1 class="title" id="page-title">了解选择器的优先级</h1><!-- class（类）样式可以实现样式复用 --><h2 class="A">css是什么？</h2><p class="A">css是层叠样式表</p><h3 class="A">css不是编程语言</h3></header></body>
</html>`
#page-title > .page-header .title
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选择器的优先级</title>
<style>
/ 0,2,0 /
.page-header .title {
color: rgb(18, 12, 31);
}
/ 1,0,0 最大及级 /
#page-title {
color: yellowgreen;
}
/* 这里是class选择器，使用class选择器可以实现样式复用 */.A {color: saddlebrown;}</style></head><body><header class="page-header"><h1 class="title" id="page-title">了解选择器的优先级</h1><!-- class（类）样式可以实现样式复用 --><h2 class="A">css是什么？</h2><p class="A">css是层叠样式表</p><h3 class="A">css不是编程语言</h3></header></body>
</html>`