当前位置：网站首页>继承和选择器的权重

继承和选择器的权重

2022-08-09 15:04:00 【恁180】

目录

1.继承

2.选择器的权重

1.继承

样式的继承

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

            优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式

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

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

 如果在p标签里面设置一个样式，那它的子元素span和em里面的内容也会继承p标签的设置的样式

但是p标签的兄弟元素span标签不会继承它的样式

2.选择器的权重：

注意：1.如果选择器的权重是一样的，则优先采用靠下的样式

           2.如果选择器是交集选择器，则所有选择器权重相加，最终谁大优先使用谁的

          3.如果选择器是并集选择器，则选择器的权重各算各的

          4.选择器的权重相加，再大也不会超过它的上一级权重

总结，哪个选择器越具体，权重就越大。

权重由大到小排列

！important>内联样式>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承

注意：!important是加在样式值的后面。

原网站

版权声明
本文为[恁180]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_65607135/article/details/126057439

边栏推荐

猜你喜欢

随机推荐