5.CSS继承性(inherited)与层叠性

CSS的继承性和层叠性是样式生效的关键。继承性使得子元素能继承父元素的一些属性,如颜色、文字样式等。层叠性则解决样式冲突,依据权重、位置等因素决定最终样式。权重计算包括id、类、标签选择器的数量,同权重时后出现的样式优先。!important可以提升权重,但不影响继承的权重。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 选上了,先比权重,相同情况下谁CSS在下面谁屌;没选中,先比较距离相应HTML元素的远近如果相同,则比较权重如果权重相同,谁CSS在下面谁屌!important只影响同级。
  2. 多层相同标签嵌套,只要有选中的可能就表示选中
    div div{}//选中了第二个和第三个div
    div{}//选中了三个div
     <div>
       <div> 
         haha
         <div>hehe</div>
       </div>
     </div>
  3. 继承性
    对元素设置属性后其后代会继承同样属性。
     color/text-开头的/line-开头的/font-开头的文字样式的都会被继承。
    盒子的/定位的/都不会被继承
    
    
    
  4. 层叠性:即CSS处理冲突的能力,权重计算不存在兼容问题
    如果选中,分别统计其id选择器/类选择器/标签选择器数量计算权重,谁大谁决定。255个选择器权重等于一个前面选择器
    
    并集选择器(,)要拆开分别计算;子选择器>不影响权重计算
      
    如果权重一样,谁写在后面谁决定。一个元素有多个类名,权重相同时依然是CSS谁写在后面谁决定,
     .c1{color:red;}
     .c2{color:blue;}//后面
     <P class="c1 c2">blue</p> 
     <P class="c2 c1">blue</p>
      
    如果未选中相应元素,通过继承来的权重为0,权重都为0,谁离相应HTML元素近谁决定,一样近,判断id/class/类权重,权重一样谁css在下面谁屌

  5. !important.加!important无比屌,权重无比高,只改变相应行的权重。同等情况下无法提升继承的权重
    p{
     color:red !important;  
     font-size:10px;
    }
    .c1{
     color:blue;
    }
    #id1{
     color:green;
     font-size:20px;
    }
    <p class="c1" id="id1">jierbangying</p>//red 20px
  6. 都是继承,则按HTML距元素就近原则。同样近,同样按id/class/标签计算排序,此时!important可提升权重。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值