css三大特性

问: css 三大特性是什么?

答:css三大特性分别是 继承性 层叠性 优先级

1. 继承性

问题:继承性的特性是什么？有哪些常见的属性可以继承

答: 特性是子元素有默认继承父元素的某些样式

  可以继承的有 文本属性  字体属性  行高  颜色属性

    如 : 

    1.color

    2.font-style、font-weight、font-size、font-family

    3.text-indent、text-align

    4.line-height

1.2 继承失效的特殊情况

• a标签的color会继承失效

• h系列标签的font-size会继承失效

• div的高度不能继承，但是宽度有类似于继承的效果

1.3 继承的小应用

• 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式

• 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

2. 层叠性

特性:相同选择器设置相同的样式就会出现样式层叠

问题1:如果给同一个标签设置了相同的属性，此时样式会出现什么情况？

答:会层叠覆盖，写在最后的会生效

问题2:如果给同一个标签设置了不同的样式，此时样式会出现什么情况？

答:会层叠叠加，共同作用在标签上

注意点:当样式不冲突时,要先考虑优先级,才能通过层叠性去进行判断

3. 优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

问题1:优先级比较公式是怎样的？

答: 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

问题2:!important能提升继承的优先级吗？

答:不能

问题3:继承的优先级是最高还是最低?

答:只要是继承优先级最低

案例 :

        body {
           color: yellow !important;
        }

        * {
            color: red;
        }
         
       div {
           color: aqua;
       }

       .box {
           color: blue;
       }

       #box {
           color: orange;
       }
    </style>


<div id="box">盒子里面到底显示什么文字了?</div>