css权重继承的理解

css与它的优先级、继承

CSS选择器：

    1. 标签选择器 
    2. 类选择器  class
    可以给多个标签指定相同的class名，也可以给一个标签添加多个class名。
    目的是：可以把一些标签的相同样式放在同一个 类 中，这些标签都可以调用这个公共的类，然后再调用自己独有的类。从而节省css代码，也方便统一修改样式。
    3. id选择器  唯一性
    4. 伪类选择   
      nth-child(n):先匹配序号，再匹配元素  first-child() last-child
      nth-of-type(n):先匹配元素，再匹配序号 first-of-type  last-of-type
      :link  :visited  :hover :active  'love hate'
      如果上面四个选择器出现两个或者两个以上时，要按照规定的顺序写代码
      :link 表示选择出未访问的链接
      :visited 表示选择出已经访问过的链接
      :hover 鼠标经过的链接
      :active  鼠标按下时候的链接
      :focus  表单元素获取焦点的时候
    5.复合选择器 ： 
    后代选择器： 选择器 选择器
    父子选择器： 选择器>选择器
    并集选择器： 选择器,选择器
    交集选择器： 选择器选择器
    6.属性选择器 [](自己下去查阅文档)
    7.伪元素选择器 (伪元素可以当做行标签使用)
    ::before  之前 前缀
    ::after  之后 后缀

CSS 选择器优先级：

    CSS优先级：即CSS权重值，权重值大的优先级大，权重值小的优先级小。
    第一等级：
    行内样式，权重值为1000；
    如 style=""
    第二等级：
    ID选择器，权重值为100；
    如 #id=""
    第三等级：
    calss选择器 | 伪类 | 属性 选择器，权重值10；
    如 .class | :hover | []
    第四等级：
    标签选择 | 伪元素选择器，权重值1；
    如 p | ::after, ::before等等
    !important权重值是无穷的，一般把!important设置的CSS属性，权重值理解成10000

最后形成优先级顺序：
!important > style属性 > #id > .class > element
注意：权重是可以相加的，内联样式与外联样式不分优先级，代码运行是从上往下走的，主要看先后顺序
![内联]
(https://img-blog.csdnimg.cn/20201211200012307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhZHdhbmc5,size_16,color_FFFFFF,t_70)
![内联]
(https://img-blog.csdnimg.cn/20201211195758834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NhZHdhbmc5,size_16,color_FFFFFF,t_70)

CSS样式具有继承性

    判断一个元素是否具有继承性，需要测试和查看文档。

    1. 有继承性的CSS属性：
    和颜色相关的属性，如：color等
    和字体相关的属性，如：font-size, font-weight等
    和文本相关的属性，如：text-align, line-height等
    和表格相关的属性，如：caption-side、border-collapse、border-spacing、       empty-cells、table-layout等
    和列表相关的属性，如：list-style-type、list-style-image、list-style-position、      list-style

    和XXX相关的，我们慢慢积累。

    2. 无继承性的
    width, height，border, margin, padding等
    display显示属性等
    定位和浮动都不具有继承性。

    .....有很多CSS属性不具有继承性，我们慢慢积累。

    详细了解：
    https://www.cnblogs.com/guokaifeng/p/10999679.html