CSS层叠性

一个css属性通过两个相同的选择器设置到同一个元素上,此时后面写的样式会覆盖掉先写的样式,遵循就近原则,哪一个样式离结构近就执行哪一个样式

CSS继承性

作用:子元素可以继承父元素的样式

1.并不是所有的属性都可以继承只有文本颜色和字号,即只有color属性以及font-/text-/line-开头的这些属性才可以继承

2.在CSS的继承中不仅仅是子级元素可以继承, 只要是后代元素都可以继承,如果很多祖先都有当前属性就继承最近的父级

3.a标签的颜色和下划线的设置不能继承,必须对a标签本身进行设置,因为设置在标签是标签默认属性而非浏览器默认属性,优先级大于继承

4.h标签的字体大小以及加粗效果不能修改,必须对h标签本身进行修改

关于行高的继承

行高可以跟单位也可以不跟单位

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

跟单位的继承:

<style>
        body {
            color: goldenrod;
            font: 12px/24px Microsoft YaHei;
        }
    </style>
</head>
<body>
    <div>
        <p>hyomin</p>
        <ul>
            <li>gloria</li>
        </ul>
    </div>
</body>

它们没有设置行高都继承了祖先元素body的行高为24px

不跟单位的继承

<style>
        body {
            color: goldenrod;
            font: 12px/1.5 Microsoft YaHei;
        }
         p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div>
        <p>hyomin</p>
        <ul>
            <li>gloria</li>
        </ul>
    </div>
</body>

1.如果子元素没有设置行高,则会继承父元素的行高为1.5

2.此时子元素的行高是当前子元素的文字大小乘以1.5

3.这样的写法是为了让里面的后代元素可以根据自己文字大小自动调整行高

以上案例中,后代元素p标签设置了文字大小为16px,乘以1.5其行高就是24px,后代元素li标签没有设置文字大小,继承了祖先元素的文字大小是12px,在乘以1.5行高就是18px

CSS优先级

优先级表示当多个选择器选中同一个元素,并且给同一个元素设置相同的属性时,由优先级来确定

优先级判断

1.如果使用的是同类型的选择器,那么谁写在后面就用谁的样式,就近原则

2.如果使用的是不同类型的选择器,那么会按照选择器的优先级来执行

3.!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

4.!important 用来提高单行CSS样式的语法，用空格和CSS属性值隔开书写,也可以用于提升选择器中某个属性的优先级, 可以将被指定属性的优先级提升为最高,其它的属性的优先级不会被提升,!important必须写在属性值的分号前面,与属性值之间加上一个空格

优先级权重

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

权重计算规则:复合选择器权重计算需要将复合选择器拆分将每一个选择器权重加起来

1.内联样式，如: style=””,权值为1，0，0，0

2.ID选择器，如：#content,权值为0，1，0，0

3.类,伪类和属性选择器，如.content,E:link,E[attr],权值为0，0，1，0

4.元素(标签)选择器和伪元素选择器，如div,p ::before,权值为0，0，0，1

5.通配符、子选择器、兄弟选择器等,如*、>、+,权值为0，0，0，0

6.继承的样式没有权值,!important的权重最高,但也会被权重更高的!important所覆盖

1,0,0,0 > 0,99,99,99也就是说从左往右逐个等级比较,只有前一等级相等才往后比

权重计算不会进位只有4组数字组成,比如0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0,复合选择器权重的计算就是一个简单的加法计算

1.如果两个权重不同的选择器作用在同一元素上权重值高的css规则生效

2.权重相同时与元素距离近的选择器生效

CSS三大特性