中软Day03——CSS基础（样式、选择器、标签类型）

中软Day03

1. 认识css

   • css的发展历程
     • 随着html的发展，为了满足前端工程的需求，css应运而生
   • 网页美容师——css
     • 让 HTML 从样式中解脱苦海， 实现了 HTML 专注去做 结构呈现。
     • 如果JavaScript是网页的魔法师，那么CSS它是我们网页的美容师
       • 没有不好看的网页，只有不会CSS的前端。
   • css初识
     • CSS通常称为CSS样式表或层叠样式表（级联样式表）
     • 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
     • 以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
     • 模块与模块之间的耦合度要低，高内聚

2. css样式规则

   h1{                 color: red;  font-size: 25px}
   选择器(标签选择器)     属性：属性值 用分号连接  
   属性="属性值" 用空格链接
   

   • 注意：排版结构 段落对齐书写css

3. css字体样式

   • font-size :字号大小

     • 该属性的值可以使用相对长度单位，也可以使用绝对长度单位

       相对长度单位	说明
       em	相对与页面的尺寸
       px	像素，最常用，推荐你使用
       绝对长度单位	说明
       in	英寸
       cm	厘米
       mm	毫米
       pt	点

     • 相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

   • font-family:用于设置字体

     • 样式：p{ font-family:“微软雅黑”;}

   • 注意：

     1.一般网页都是14px以上的字体
     2.偶数字体字号，ie6等老式浏览器支持奇数会有bug
     3.各种字体之间用英文状态下的逗号隔开
     4.中文字体需要加英文状态下的引号，英文字体一般不需要加引号
     5.当需要设置英文字体时，英文字体名必须位于中文字体名之前
     4.如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";
     5.尽量使用系统默认字体，保证任何用户的浏览器都能正确显示
     

   • CSS Unicode字体

     • 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

     • Unicode,同一码，万国码，单一码，业界标准，它为每种语言的每个字符都设置一个唯一的二进制编码，以满足我们跨语言，跨平台进行文本转换，处理的要求。

       • 用英文表示
       • 用unicode
       • 一般用中文

       字体名称	英文名称	Unicode 编码
       宋体	SimSun	\5B8B\4F53
       新宋体	NSimSun	\65B0\5B8B\4F53
       黑体	SimHei	\9ED1\4F53
       微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
       楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
       隶书	LiSu	\96B6\4E66
       幼园	YouYuan	\5E7C\5706
       华文细黑	STXihei	\534E\6587\7EC6\9ED1
       细明体	MingLiU	\7EC6\660E\4F53
       新细明体	PMingLiU	\65B0\7EC6\660E\4F53

   • font-weigth:字体粗细

     • 字体加粗除了用b和strong标签之外，可以使用css来实现，但是css是没有语义的。

     font-weight的属性值
     
     ​	normal,bold,lighter,100-900（100的整数倍）
     700和boldr一样，400相当与normal
     

   • font-style:字体风格，如设置斜体、倾斜或正常字体

     字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

     • normal:默认值，浏览器会显示标准的字体样式。
     • italic：浏览器会显示斜体的字体样式。
     • oblique：浏览器会显示倾斜的字体样式。

   • font:综合设置字体样式（重点）

     选择器{font: font-style  font-weight  font-size/line-height  font-family;}
     

     • 重中之重

     使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
     
     注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
     

4. 开发者工具（chorme）

   • "F12"或"shift+ctrl+i"打开 开发者工具

     菜单： 右击网页空白出—查看

   • 小技巧

     • ctrl+滚轮可以放大代码
     • 可以同时查看html,css代码
     • css样式可以实时更改

5. 选择器（重点）

   要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

   • 基础选择器

     • 标签选择器（元素选择器）

       标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

       标签名  {属性名1:属性值1；属性名2:属性值2；}
       

       • 优点是快速为页面用的标签同一样式，也是缺点，不能设计差异化样式

       • 例：

         
         "en">
         
         	"UTF-8">
         	
         	
         
         
         	
         	
         	
         浙江省宁波市
         	
         
         
         
         

     • 类选择器

       类选择器"."（英文点号）进行表示，后面紧跟类名

       .类名{属性名1:属性值1；属性名2:属性值2；}
       

       • 优点：可以为元素定义单独或相同的样式，可以选择一个或多个标签。

       1.长名称或词组可以使用中横线-为选择器命名
       2.不建议使用下划线命名css选择器
       	1.少按一个shift键
       	2.区分js变量变量
       	3.浏览器兼容问题，在IE6中 _tip无法生效的
       3.不要用纯数字，中文命名，尽量用英文字母表示
       

       • 例：Google

         
         
         
         	
         	
         	
         
         
         	"green blue">G
         	"red">o
         	"orange">o
         	"blue">g
         	"green">l
         	"red">e
         
         
         

     • 多类名选择器

       可以为标签增加多个类名，达到更多选择的目的

       1.样式显示效果和html元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关
       2.各个类名用空格连接
       3.多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
       

     • id选择器

       id选择器用"#"进行表示，后面紧跟id名

       #id名{属性名1:属性值1；属性名2:属性值2；}
       

       • id是唯一的，只能针对文档某一个特定的元素
       • id是html的id属性值，用法和类选择器类似

     • id选择器和类选择器区别

       • 使用次数：id相当身份证号(不得重复，只是用一次)，类选择器相当名字（多次重复使用）

     • 伪类选择器

       伪类选择器添加一些特殊效果，比如选择第一元素，第n个元素。

       类选择器用 . 伪类用 :

       • 链接伪类选择器

         • ：link 未访问的链接
         • ：hover 鼠标悬停
         • ：visited 已访问的链接
         • ：active 点击的链接

         通过对应四种状态的伪类选择器，可以设置其状态。
         
         但伪类选择器需要按照一定的顺序设置，否则某些状态效果不会生效。
         
         选择器正确排序是 :link > :visited > :hover > :actvie。
         

         • 例：

           
           
           
           	
           	
           	
           
           
           	"#">兵者
           	"111">死生之地
           	"https://www.baidu.com">存亡之道
           
           
           

       • 结构(位置)伪类选择器（CSS3)

       • 目标伪类选择器(CSS3)

     • 通配符选择器

       *{属性名1:属性值1；属性名2:属性值2}
       

       所有选择器作用最广的，匹配所有元素

       • 一般只用于清除HTML标记的默认边距：

         * {
             margin:0;/*定义外边距*/
             padding:0;/*定义内边距*/
          }
         

6. css注释

   • 与html的 不同，css使用/**/来注释
   • 如果在css中使用 很可能导致后面的代码无法解析使用

   CSS规则是使用     /*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。
   

   • 例：

     p {
       font-size: 14px;                 /* 所有的字体是14像素大小*/
     }
     

7. css外观属性

   • color文本颜色

     color属性用于定义文本的颜色，其取值方式有3种：

     • 预定义的颜色值，如red.pink等。

     • 十六进制：如#FF0000等，实际工作中，十六进制是最常用的定义颜色的方式。

     • RGB代码：如红色可以表示为rgb(255,0,0)。

       需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分比，必须写0%。

   • line-height:行间距，行高

     • 用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
     • line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
     • 一般情况下，行距比字号大7.8像素左右就可以了

   • text-align:水平对齐方式

     • 相当于html中的align对齐属性
     • 其可用属性
       • left：左对齐（默认值）
       • right：右对齐
       • center：居中对齐（是让盒子里面的内容水平居中，而不是让盒子居中对齐）

   • text-indent:首行缩进

     • 用于设置首行文本的缩进
     • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位
     • 1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

   • text-decoration:文本的装饰

     • 通常用于给链接修改装饰效果
     • 属性值：
       • none(默认)定义标准的文本。
       • underline:文本下的一条线。（下划线也是链接自带的）
       • overline:文本上的一条线
       • line-through:穿过文本的一条线

   • letter-spacing:字间距

     • 用于定义字间距，所谓字间距就是字符与字符之间的空白
     • 其属性值可为不同单位的数值，允许使用负值，默认为normal

   • word-spacing:单词间距

     • 用于定义英文单词之间的间距，对中文字符无效
     • 和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal

   • 颜色半透明（css3）

     文字颜色到了CSS3我们可以采取半透明的格式

   • 文字阴影（css3）

     • text-shadow:水平位置 阴影大小

8. sublime快捷方式

   sublime可以快速提高我们代码的书写方式

9. 引入css样式表

   • 内嵌式（内部样式表）

     内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

     <head>
     <style type="text/CSS">
         选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
     style>
     head>
     

     • 在html5中可以省略，但一般都会写上，比较规范
     • 一般放在head标签内，也可以放在其他位置

   • 行内式（内联样式）

     内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

     <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 标签名>
     

   • 外链式（外部样式表）

     链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

     <head>
     <link href="css文件的路径" type="text/css" rel="stylesheet">
     head>
     

     link单标签，放在头部head里

     1. href,定义外部样式文件的URL,可以是相对路径，也可以是绝对路径
     2. type,所连接文档的类型，text/css表示一个css文件
     3. rel 定义当前文档和所链接文档的关系，在这里需要指定stylesheet

   • 三种样式表总结

     样式表	优点	缺点	使用情况	控制范围
     行内样式表	书写方便，权重高	没有实现样式和结构的分离	较少	控制一个标签
     内部样式表	部分结构和样式分离	没有完全分离	较多	控制一个页面的标签
     外部样式表	完全实现样式和结构的分离	需要引入	最多，墙裂推荐	控制整个站点

10. 标签显示模式（display）

• 标签类型
  • 块标签（块元素block）
  • 行内标签（行内元素inline）
  • 行内块标签（行内块标签inline-block）

• 块级元素（block-level）

  常见的块元素有
  ~
  、
  、
  、
  、
  、
  等，其中
  标签是最典型的块元素。
  

  每个块级元素都占一行，可以设置宽高，对齐等属性，常用于网页布局和结构的搭建。

  特点：

  • 总是从新行开始
  • 高度，行高，外边距及内边距都可以控制
  • 宽度是容器的100%
  • 可以容纳内联元素和其他块级元素

• 行内元素（inline-level）

  常见的行内元素有、、、、、、、、、等，其中标签最典型的行内元素。
  

  行内元素没有独立空间，是通过内容（图片，文字）来撑起结构，一般不可以设置宽高，对齐等属性,常用于控制页面中文本的样式。

  特点：

  • 和相邻元素在同一行上

  • 宽高无效，单水平的padding,margin可以设置的。垂直无效

  • 默认宽度就是本身的宽度

  • 行内元素能容文本或其他行内元素（a特殊，a里面可以放块级元素）

  注意：

   *只有文字才能组成段落，因此p里面不能放块级元素，同理还有这些标签h1~h6，dt,他们都是文字类块级标签，里面不能放其他块级元素。
   *链接内不可再放置链接
   *行内元素不可以放块级标签
  

• 块级元素和行内元素区别

  块级元素的特点

  • 总是从新行开始

  • 高度，行高，外边距及内边距都可以控制

  • 宽度都是容器的100%

  • 可以容纳内联元素和其他块级元素

  行内元素的特点:

  • 和相邻的行内元素在同一行上
  • 宽高无效，单水平方向的padding，margin可以设置的，垂直的无效
  • 默认宽度就是本身内容的宽度
  • 行内元素能容文本或其他行内元素

• 行内块元素（inline-block）

  在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
  

  可以对他们设置宽高和对齐属性

  特点：

  • 和相邻的元素(行内元素或行内块元素)在一行上，但之间会有空隙
  • 默认宽度也本身内容的宽度
  • 行高，宽高都可以控制

• 标签显示模式转换 display

  • 块状元素转行内

  display:inline
  

  • 行内元素转块级元素

  display:block
  

  • 块状元素，行内元素转行内块元素

  display:inline-block
  

11. css复合选择器

    复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

    • 交集选择器

      由两个选择器组成，其中第一个为标签选择器，第二个为类选择器，两个选择器之间不能有空格，如h3 .special。（用的相对来说比较少，不建议使用）。

      p.p1{
      font-family:"微软雅黑"
      }
      

    • 并集选择器

      • 各个选择器用逗号链接，任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为他们定义相同的css样式。

        div,p{
        		color: red;
        	}
        

      • 举例：.one, p, #test {color: #F00;}表示： .one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。

    • 后代选择器（包含选择器）

      • 用来选择元素或元素组的后代
      • 用空格连接，子子孙孙都可以被选中，它能选择任何包含在内的标签。
      • 把外层标签写在前面，内层标签写在后面，中间用空格分割。
      • 当标签发生嵌套时，内层标签就成为外层标签的后代。

    • 子元素选择器

      • 只包含子元素，父级标签写在前面，子级标签写在后面，中间用>连接，注意，符号左右两侧各保留一个空格。
      • 注意：这里的子指的是亲儿子，不包含孙子，重孙子之类的。

    • 属性选择器

      • 选取标签带有某些特殊属性的选择器

        div[class^=font]{
        			color: red;
        		}
        		div[class$=font]{
        			color: blue;
        		}
        		div[class*=font]{
        			color: pink;
        		}
        

      • 标签名[属性名^=属性值]{ 属性名1：属性值1;}

      • ^起始位置，$结束位置，*任意位置

    • 伪元素选择器（css3）

      • E::first-letter 文本的第一个单词或字

      • E::first-line 文本第一行

      • E::selection，可以改变选中文本的样式

      • E::before 和E::after

        在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，必须要结合content属性使用

      伪类是一个冒号，伪元素是两个冒号。
      

12. css书写规范

    【强制】选择器与{之间必须包含空格

    • 空格规范

      • 选择器与{之间必须包含空格
      • 属性名与之后的:之间不允许包含空格，:与属性值之间必须包含空格

      font-size: 12px;

    • 选择器规范

      • 当包含多个选择器时，每个选择器声明都必须独占一行
      • 【建议】嵌套不应超过三级

    • 属性规范

      • 【强制】属性定义必须另起一行
      • 【强制】属性定义后必须加上分号

13. css背景（background）

    属性	用法
    background-color 背景颜色
    background-image 背景图片地址
    background-repeat 是否平铺
    ackground-position 背景位置
    background-attachment 背景固定还是滚动
    背景的合写（复合属性）
    background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

    • 背景图片（image）

      background-image : none | url (url) 
      

      • 参数：
        • none:无背景图（默认的）
        • url: 使用绝对或相对地址指定背景图像

    • 背景平铺（repeat）

      background-repeat : repeat | no-repeat | repeat-x | repeat-y 
      

      • 参数：
      • repeat:背景图像在纵向和横向上平铺（默认的）。
        • no-repeat:背景图像不平铺。
        • repeat-x:背景图像在横向上平铺。
        • repeat-y:背景图像在纵向上平铺。

    • 背景位置（position）

      background-position : length || length
      
      background-position : position || position 
      

      • 参数：

        • length:百分数，参阅长度单位。

        • position:top|center|bottom|left|right

      • 说明：

        设置或检索对象的背景图像位置，必须先指定background-image属性。默认值为（0%，0%），如果只指定了一个值，该值将用于横坐标，纵坐标将默认为50%。第二个值将用于纵坐标。

      • 注意：

        position后面是x坐标和y坐标。可以使用方位名词或者精确单位。

        如果和精确单位和方位名词混合使用，则必须是x坐标在前，y坐标在后面。

        实际工作中用的最多的，就是图片居中对齐。

    • 背景附着

      background-attachment : scroll | fixed 
      

      • 参数：

        • scroll:背景图像是随对象内容滚动

      • fixed:背景图像固定

      • 说明：

        设置或检索背景图像是随内容滚动还是固定的。

    • 背景简写

      • background属性的值的书写顺序官方并没有强制标准.

      可读性书写：background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

      background: color url(image.jpg) repeat-y  scroll 50% 0 ;
      

    • 背景透明（css3）

      background: rgba(0,0,0,0.3);
      

      最后一个参数是alpha透明度 取值在0~1；

      注：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

    • 背景缩放（css3）

      • 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
      • 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
      • 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

    • 多背景（css3）

      以逗号分隔可以设置多背景，可用于自适应布局

      • 一个元素可以设置多重背景图像。
      • 每组属性间使用逗号分隔。
      • 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
      • 为了避免背景色将图像盖住，背景色通常都定义在最后一组上

14. css三大特性

    • css层叠性

      • 是指多种css样式的叠加

      • 浏览器处理冲突时，一个属性通过两个相同选择器设置到同一个元素上，那么一个属性就会将另一个属性覆盖掉

      • 一般情况下，如果出现样式冲突，则按照css书写的顺序，以最后的样式为准

        • 样式冲突时，遵照就近原则执行显示样式
        • 样式不冲突，不会层叠

        
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <style>
        		
        		div {
        			color: skyblue;
        			font-size: 12px;
        		}
        
        		div {
        			color: hotpink;
        		}
                style>
            head>
            <body>
            <div> 言无务文而务为察 div>  
            1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
            2. 样式不冲突，不会层叠
            body>
        html>
        

    • css继承性

      • 是指书写css样式表时，子标签会继承父标签的某些样式。想要设置一个可继承的属性，只需将它应用于父元素。

      注意：

      恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
      

      
      <html lang="en">
          <head>
              <meta charset="utf-8">
              <style>
      		div {
      			color: pink;
      			font-size: 20px;
      		}
      		
              style>
          head>
          <body>
          <div>
          	<p>王夫之p>
          div>
          body>
      html>
      

    • css优先级

      在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

      继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
      
      行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
      
      权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
      
      css有一个命令 !important  优先级最大
      

    CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

    
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
           /*  0， 0 ， 0 ， 0  特殊性公式 */
            
            div {  /* 标签选择器  0,0,0,1*/
              color: pink;
            }
            
            :first-child {  /* 伪类选择器 0,0,1,0 */
              color: green;
            }
    
            .king {  /* 类选择器  0,0,1,0 */
              color: blue;
            }
    
            #wang {  /* id选择器   0,1,0,0 */
              color: red;
            }
    
            /* 最大的  不是选择器 */
    
            div {
              color: orange!important;  /* important就是重要的  级别最高 一旦出现优先执行*/
            }
            style>
       
        head>
        <body>
        <div class="king" id="wang" style="color: skyblue"> 王者农药 div>
        body>
    html>
    

    • css特殊性（Specificity）

    关于css权重，我们用一套计算公式来计算，这个就是CSS Specificity,称之为css特性或称非凡性，它是一个衡量css值优先级的一个标准。

    • specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

    继承或者* 的贡献值	0,0,0,0
    每个元素（标签）贡献值为	0,0,0,1
    每个类，伪类贡献值为	0,0,1,0
    每个ID贡献值为	0,1,0,0
    每个行内样式贡献值	1,0,0,0
    每个!important贡献值	∞ 无穷大
    权重可以叠加，如下图

    div ul  li   ------>     0,0,0,3
    
    .nav ul li   ------>     0,0,1,2
    
    a:hover      -----—>     0,0,1,1
    
    .nav a       ------>     0,0,1,1   
      #nav p       ----->      0,1,0,1
    

    四位数字组成，从左到右，权重愈减，数位没有进制，级别之分

    
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
    		
    		ul li { /*  ul 0001  li 0001  叠加  0,0,0,2 */
    			color: green;
    		}
    		li { /*  0,0,0,1 */
    			color: red;
    		}
    		nav ul li {/* 叠加之后的  0,0,0,3  最后执行蓝色*/
    			color: blue;
    		}
    		.daohang ul li {  
    			color: pink;
    		}
            style>
        head>
        <body>
        <nav class="daohang">
        	<ul>
        		<li>李白li>
        		<li>杜甫li>
        		<li>卢照邻li>
        	ul>
        nav>
        body>
      html>
    

    
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
    		.daohanglan { /*  0,0,1,0  是 nav 的  不是 li */
    			color: red;
    		}
    		li {  /*  0,0,0,1 */
    			color: pink;
    		}
            style>
        head>
        <body>
        <nav class="daohanglan">
        	<ul>
        		<li>继承的权重为0li>
        	ul>
        nav>
        body>
      html>
    

    
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <style>
    		div {
    			color: red!important; 
    		}
    		/* :first-child == div[style] 权重一样的 */
    			;
    		* {
    			color: blue;
    		}
            style>
        head>
        <body>
        <div style="color:blue">123div>
        body>
      html>
    

    1. 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
    2. 继承的权重为0
    

    • 总结优先级

      • 使用了 !important声明的规则。
      • 内嵌在 HTML 元素的 style属性里面的声明。
      • 使用了 ID 选择器的规则。
      • 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
      • 使用了元素选择器的规则。

    • 只包含一个通用选择器的规则。

      • 同一类选择器则遵循就近原则。

    总结：权重是优先级的算法，层叠是优先级的表现