继承和选择器权重的解释

发布于:2022-11-28 ⋅ 阅读:(255) ⋅ 点赞:(0)

目录

1.继承

2.选择器权重


1.继承

 样式的继承(继承祖先的资产)

            定义:为一个元素设置的样式,同时也会应用到它的后代元素上

            优势:方便我们开发,将一些通用的样式统一设置到共同的祖先元素上,

                  子元素的样式都可以获取到样式

             注意:并不是所有的样式都会被继承,比如:背景相关的,布局相关等不会被继承

 <body>
    <p>
      我是一个p元素
      <span>我是p元素的span元素
        <em>我是span里面的em元素,我也可以继承</em>
      </span>
    </p>
    <span>我是p元素外的span元素,我不会继承</span>
  </body>

     共同的祖先元素,一般会设置字体的大小,颜色,行高,字体,最小宽度

body {
        font-size: 14px;
        color: #eee;
      }

2.选择器的权重

关于选择器权重 有一个经典的面试题

样式冲突 通过不同的选择器选中同一个元素,进行一样的样式设定

 发生样式冲突时,应用哪一个样式由什么决定?

由选择器的权重  决定

选择器的权重(优先级)

         选择器的权重  

           !important    最高优先级     慎用  一般是用来检测是否是选择器权重问题

           内联样式                                                                  1000  

           id选择器                                                                    100

           类和伪类选择器/属性选择器                                       10

           元素选择器                                                                    1

           通配符、子选择器、相邻选择器等。如*、>、+         0000

           继承的样式      没有优先级

p:数值是为了让大家更清晰的了解选择器的权重,不是真实数值

注意:

          1、比较优先级时,需要将所有选择器的优先级进行相加计算,最后优先级越高,则优先显示

          2、 (并集选择器)分组选择器是单独计算的

          3、 如果优先级计算后相同,此时则优先使用靠下的样式

          4、选择器的累加,不会超过上一级数量级,

              例如:类选择器再高也不会超过id选择器  量变达不到质变

            一般来说:

            选择器越具体,优先级越高

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到