理解CSS||青训营笔记课程介绍本课程主要面向刚刚入门的前端同学，主要讲述了JS的整体发展及一些比较重要的知识。其中通

课程介绍

本课程主要面向刚刚入门的前端同学，主要讲述了JS的整体发展及一些比较重要的知识。其中通过一些简单的代码讲述了变量提升、JS的数据是怎么存储的、基础数据类型和复杂数据类型的区别等一些基础知识，也讲解了JS的执行、闭包、垃圾回收等一些稍微进阶一些的知识，希望大家能有所收获

课程重点

JS的基本概念
JS的数据类型
变量提升
作用域
闭包
垃圾回收

选择器 Selecter

通配选择器

<h1>This is heading</h1>
<p>This is some paragraph.</p>

<style>
    * {
    color:red;
    font-size:20px;
    }
</style>
复制代码

标签选择器

<h1>This is heading</h1>
<p>This is some paragraph.</p>

<style>
    h1 {
        color: orange;
    }
    p {
        color: gray;
        font-size:20px;
    }
</style>
复制代码

id选择器

<h1 id="logo">
    <img
       src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48"/>
    HTML5 文档
</h1>
    
<style>
    #Logo {
        font-size： 60px;
        font-weight: 200;
    }
</style>
复制代码

类选择器

<h2>Todo List</h2>
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>

<style>
    .done {
        color: gray;
        text-decoration:Line-through;
</style>
复制代码

属性选择器

<Label>用户名：</label>
<input value="zhao" disabled />
<label>密码：</label>
<input value="123456" type="password"/>

<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
    input[type="password"] {
        border-color: red;
        color: red;
    }
</style>
复制代码

伪类（pseudo-classes）

<style>
    a:link{   }
    a:visited {  }
    a:active {  }
    :focus{   }
    li:first-child{	  }
    li:last-child{	 }
</style>
复制代码

选择器的特异度

id > . > E

继承

某些属性回自动继承其父元素的计算值，除非显式指定一个值

文字属性（color等）一般都可继承，和模型相关的属性（p的width等）一般不可继承

显式继承

inherit

让一个不可继承的属性变成可继承

<style>
    * {
        box-sizing: inherit;
    }
    html {
        boxing-sizing: border-box;
    }
    .some-widget {
        box-sizing: content-box;
    }
</style>
复制代码

如果从元素父集一层一层往上找没找到 => 初始值