CSS的继承性和层叠性(四)

一. 继承性

继承:有一些属性,当给自己设置的时候,自己的后代都继承上了,这便是继承性。继承性从自己开始,直到最小的元素。
继承的属性有:colortext-开头的line-开头的font-开头的
文字样式的,都能继承,而所有关于盒子的、定位的、布局的属性都不能继承。

二. 层叠性

层叠性:就是CSS处理冲突的能力。所有的权重计算,没有任何兼容问题

2.1 当选择器,选择上了某个元素的时候,那么要这样统计权重

统计权重的顺序:id的数量,类的数量 ,标签的数量

Snip20161108_11.png
2.2 如果权重一样,那么写在后面的为准
Snip20161108_12.png
2.3 如果不能直接选中某个元素,通过继承性影响的话,那么权重为0
Snip20161108_13.png
2.4 如果大家都是0,则就近原则(谁描述近,就听谁的)
Snip20161108_14.png

大杂烩

Snip20161109_1.png
Snip20161109_2.png
Snip20161109_3.png

额外补充关于权重

1.同一标签,携带了多个类名,有冲突

<p class="cls1 cls2">我是啥颜色???</p>
<p class="cls2 cls1">我是啥颜色???</p>

与结构中的顺序无关,而与css的顺序有关

.cls1{
  color:red;
}
.cls2{
color:yellow;
}

结果是yellow.因为yellow写在后面

2.!important(重要的)标记
!important来给一个属性提交权重,这个属性的权重就是无穷大。语法:k:v!important

Snip20161109_4.png

!important提升的是一个属性,而不是一个选择器
!important无法提升继承的权重,该是0还是0
HTML结构

    <div>
           <p> 猜猜我是啥颜色</p>
     </div>

CSS样式

 div{
            color: red!important;
        }
        p{
            color:  gold;
        }

最终显示的颜色为gold,因为!important无法提升它的权重,因为p标签已经选中了,故显示颜色为gold

!important不影响就近原则
3.权重计算图例总结

权重计算图例


权重总结
1>先看有没有选中,如果选中,则以(id数量,类数量,标签数量)来计算权重,谁大听谁的,如果都一样,听后写的为准。
2>如果都没有选中,那么权重为0,如果大家都是0,就近原则。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,214评论 0 40
  • 不知道时间过的这么快,已经到了谈婚论嫁的年龄了。真的问自己想要什么性格的女生切实有些迷茫。内心的迷茫归结于自己略显...
    丁桥人在外地阅读 321评论 1 0
  • 今天是个值得期待的日子同时也是个值得纪念的日子,平度市第一届家长节有幸在我们厦门路小学开幕了。我有幸作为志...
    指间的阳光923802阅读 264评论 1 1
  • 三项一、小组规则有变化,公布新规则二、评选优秀组员和优秀死党组三、公布小组今天打卡情况 一、小组规则(运动打卡规则...
    舜间永恒阅读 189评论 0 0