CSS特性和优先级

CSS特性

继承性

某些属性，只需要给父级标签去加，则子级自然而然也会实现

例：所有控制文字的属性都能继承，反之都不能继承

/*
1.color
2.font-style、font-weight、font-size、font-family
3.text-ident、text-align
4.line-height
5.。。。
*/

继承失效的特殊情况

/*
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1.a标签的color会继承失效
2.h系列标签的font-size会继承失效
*/

层叠性

层叠性：即后面的能把前面的覆盖掉

/*
特性：
    1.给同一个标签设置不同的样式-->此时样式会层叠叠加-->会共同作用在标签上
    2.给同一个标签设置相同的样式-->此时样式会层叠覆盖-->最终写在最后的样式会生效
注意点：
    1.当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
*/

    <style>
        .big_box {
            width: 350px;
            height: 350px;
            /*即：后面的会覆盖前面的，最终展示最后执行的背景色属性优先级相同的情况下，哪个代码在后面就生效哪个*/
            background-color: aqua;
            background-color: bisque;
        }
​
    </style>

CSS优先级

通常：

哪个选择器能更精确的找到标签，则优先级就越高

选择器选择的范围越广，则优先级越低

例：标签选择器的优先级小于类选择器的

要解决的问题：

当一个标签使用了多个选择器，样式冲突的时候，最终生效的

/*
优先级公式：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
​
注意点：
1. !important写在属性值的最后，分号的前面
2. !important不能提升继承的优先级，只要是继承优先始终是最低的
3. 慎用!important
*/

复合选择器判断优先级

/*
第一级个数(行内样式的个数)：从0开始
第二级个数(id选择器的个数)：从0开始
第三级个数(类选择器个数)：从0开始
第四级个数(标签选择器个数)：从0开始
​
比较规则：
1.先比较第一级数字，如果比较出来了，后面的就统统不用看了
2.如果第一级数字相同，此时再取比较第二级个数，如果比较出来了，后面的就统统不用看了
3. 。。。依此类推
4.如果最终所有数字相同，则表示优先级相同，则比较层叠性(即：哪行代码后执行，哪后生效)
*/