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>