这是我参与【第五届青训营】伴学笔记创作活动的第七天。

1. 继承

样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上
继承是发生在祖先后代之间的，继承的设计是为了方便我们的开发
利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式
注意,并不是所有的样式都会被继承：

比如背景相关的，布局相关等的这些样式都不会被继承。

我们可以在zeal手册中，搜索backgroud-color属性，可以看到一个定义的表格。其中就说明了其不可被继承性。

屏幕截图 2023-02-10 215622.png

2. # 选择器的权重

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重(优先级)决定选择器的权重

选择器	权重
内联样式	1，0，0，0，
ID选择器	0, 1, 0, 0,
类和伪类选择器	0,0,1,0
元素选择器	0，0，0，1
通配选择器	0，0，0，0，
继承的样式	没有优先级

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示(分组选择器是单独计算的)
选择器的累加不会超过器最大的数量级，类选择器再高也不会超过ID选择器
如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后面添加!important,则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中一定要慎用！

屏幕截图 2023-02-10 223824.png


 <style>
        
       /* 选择器	      权重
内联样式	                1, 0, 0, 0
ID 选择器               0, 1, 0, 0
类和伪类	               0, 0, 1, 0
元素选择器	       0, 0, 0, 1
通配选择器	       0, 0, 0, 0
继承的样式	     没有优先级 */
        
  
        
        
        .box2{
          color: aquamarine;
        }
     #box{
        color: blue;
     }
 div{
    color: darkgoldenrod;
 } 


 ::first-letter{
    font-size: 50px;
    color: chartreuse;
 }

    </style>

CSS样式继承与其他概念|青训营笔记

1.

继承

2. # 选择器的权重