2021-05-08

 CSS的层叠与继承

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： MVC

 

撰写时间：2021/5/8

 

1、继承：我们的CSS中很多的属性也是可以继承的，

         其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。当然还有一部分是不能继承的：例如边框、内外边距。

下图是一些CSS文字样式表包括属性，样式效果以及用法和值

 

2、层叠：层叠是CSS的核心机制。

层叠的工作机制：当元素的同一个样式属性有多种样式值的时候，CSS 中的“层叠（cascading）”表示样式单规则应用于 HTML文档元素的方式。

具体地说，CSS 样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由 CSS 根据这个层次结构决定，从而实现级联效果。

 

3、CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

 

4、CSS就是靠层叠机制来决定最终应用哪种样式。

 5、层叠规则：

 

①层叠规则一：找到应用给每个元素和属性的声明。

                          说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，

               并标识出所有受到影响的HTML元素。

 

    ②层叠规则二：按照顺序和权重排序。

按顺序：说明：浏览器依次检查CSS样式的来源，并设定匹配的属性，如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环。

               权重排序：!important

 

③层叠规则三：按等级排序。

   可以把样式的应用方式分为几个等级，按照等级来计算权重
1、内联样式，如：style=””，权重值为1000
2、ID选择器，如：#content，权重值为100
3、类，伪类，如：.content、:hover 权重值为10
4、标签选择器，如：div、p 权重值为1

 

 

 

6、如下图两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000，

所以文字的最终颜色为blue

 

  

7、如下图

第一条样式的权重计算： 1+100+10+1，结果为112；

第二条样式的权重计算： 100+10+1，结果为111；

h2标题的最终颜色为red

 ④层叠规则四：顺序决定权重。

                          说明：如果两条规则都影响到某元素的同一属性，而它们的特制度也相同，

               则位置最靠下的胜出。

     规则一：在特指度相同的情况下，按排列

这是我所学到的在CSS中的继承与层叠，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！