CSS作业1-20201009
1、必做: css元素样式来源有哪些,实例演示
2、选做: css优先级冲突的解决方案
1、css元素样式来源
(1)标签tag
(2)类class
(3)id属性
(4)元素添加的style
(5)强行优先级的属性
(6)外部公共样式common.css,jQuery.css,layui.css
2、实例演示 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>
3、css优先级冲突的解决方案
(1)Css优先级 tag < class <id < 标签内部的style < !important
(2)css内部样式优先级高于外部样式
选择器优先级冲突解决方案-改变选择器的优先级
| 案例 | 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 |
4、举例说明
<!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>
5、注意事项：
-尽可能使用类class
-尽量少用 !important
-尽量少用 #id 级别太高，不灵活
-尽量少用 tag 不方便样式复用