1.层叠

层叠性: 权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了
权重: 谁的权重大,浏览器就会显示谁的属性
谁的权重大? 非常简单就是小学的数数。
数:id的数量 class的数量 标签的数量,顺序不能乱

2.继承性

面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。
继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。
记住:有一些属性是可以继承下来 : color 、 font-、 text-、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承。

以下是权重表:
CSS的两个核心概念——层叠和继承
例:
这段代码一个设置黄色,一个设置红色,但具体是那个执行?
CSS的两个核心概念——层叠和继承
答案是红色,为什么说是红色?结论:当权重一样的时候 是以后面设置的属性为准,前提是必须权重一样 。这叫‘后来者居上 ’。

我们再来看看下面的代码
CSS的两个核心概念——层叠和继承
答案是绿色。是不是有点快懵掉了。我刚学的时候也是比较懵,其实大家只要记住这点特性就可以。第一条css设置的属性值,是通过继承性设置成的红色,那么继承来的属性,它的权重为0。它没有资格跟我们下面选中的标签对比。

小案例证明:权重都是0:那么就是"就近原则" : 谁描述的近,就显示谁的属性。所谓描述的近,就是选中到最内层的距离越近。

总结:
1.先看标签元素有没有被选中,如果选中了,就数数 (id,class,标签的数量) 谁的权重大 就显示谁的属性。权重一样大,后来者居上
2.如果没有被选中标签元素,权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:“就近原则” : 谁描述的近,就显示谁的属性。

相关文章:

  • 2021-11-12
  • 2021-12-05
  • 2018-12-10
  • 2021-07-26
  • 2019-02-24
  • 2021-09-18
  • 2021-04-09
  • 2020-01-10
猜你喜欢
  • 2019-03-28
  • 2020-04-27
  • 2021-12-15
  • 2021-12-15
  • 2021-11-19
  • 2021-12-05
  • 2021-11-09
  • 2019-11-13
相关资源
相似解决方案