![[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
1、必做: css元素样式来源有哪些,实例演示
(1)标签tag
(2)类class
(3)id属性
(4)元素添加的style
(5)强行优先级的属性
(6)外部公共样式common.css,jQuery.css,layui.css
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css学习3</title><link rel="stylesheet" href="/1009/static/css/style.css"><!-- 内部样式表，仅适合当前的html页面 --><style>/* 标签选择器 */h1 {color:red;}/* 类选择器.class */.title {/* color:orange !important; 强行优先变成orange*/color:orange;}/* #id选择器 */#page-title {color:yellow;background:red;}</style><body><h1 id="page-title" class="title" style="color:pink;">买软件 找开吉尔！</h1><h1>caj9.com</h1><script>console.log(document.querySelector("title"));console.log(document.querySelector(".title"));</script></body></html>
| 案例 | id | class | tag | 标识 |
|---|---|---|---|---|
| html body header h1 | 0 | 0 | 4 | 0 0 4 |
| html body header.page-header h1 | 0 | 1 | 3 | 0 1 3 |
| .page-header .title | 0 | 2 | 0 | 0 2 0 |
| #page-title | 1 | 0 | 0 | 1 0 0 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css学习3</title><link rel="stylesheet" href="/1009/static/css/style.css"><!-- 内部样式表，仅适合当前的html页面 --><style>/* 标签选择器 */h1 {color:red;}/* 类选择器.class */.title {/* color:orange !important; 强行优先变成orange*/color:orange;}/* 类选择器.class */.page-title {color:purple;}/* #id选择器 */#page-title {color:yellow;background:red;}</style><body><header class="page-header"><h1 id="page-title" class="title" style="color:pink;">买软件 找开吉尔！</h1></header><script>console.log(document.querySelector("title"));console.log(document.querySelector(".title"));</script></body></html>
-尽可能使用类class
-尽量少用 !important
-尽量少用 #id 级别太高，不灵活
-尽量少用 tag 不方便样式复用
天蓬老师