【web前端开发】浅谈CSS三大特性

深碍√TFBOYSˉ_ 2023-09-27 15:26 29阅读 0赞

#### 文章目录 ####

*  CSS的三大特性
 *   *  继承性
     *  层叠性
     *  优先级

## CSS的三大特性 ##

CSS有三个特性,分别是是层叠性、继承性以及优先级

### 继承性 ###

> 特性:子元素会继承父元素样式的特点

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
          div{
          
              color: blue;
          }
        </style>
    </head>
    <body>
    <div>
        <p>这是一个段落</p>
    </div>
    </body>
    </html>

效果:  
![在这里插入图片描述][b4f6c828c99642f8a3314afb9f752fb9.png]  
虽然是给div设置样式,但是p标签在div里,因为CSS的继承性,所以p标签就继承了div的样式 字就变成蓝色了

CSS的继承性虽好,但也不是所有的都能继承

*  `控制文字的属性都能继承,不能控制文字属性的都不能继承`

继承**失效**的两种情况:

1.  a标签的color会继承失效
2.  h系列的font-size会继承失效

### 层叠性 ###

> CSS本身就叫做层叠样式表.层叠性也很好理解,就是给标签设置不同的样式,最后会层叠到一起,共同作用在标签上

*  `当样式冲突时,只有当选择器优先级相同时,才会通过层叠性判断效果`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
          p {
          
              color: red;
              color: blue;
          }
        </style>
    </head>
    <body>
    <div>
        <p>这是一个段落</p>
    </div>
    </body>
    </html>

效果:  
![在这里插入图片描述][4bc2e681791e4f299454cb3ed2e952ba.png]  
虽然我给p标签设置了两次颜色,但是后面的颜色将前面的颜色给覆盖掉了,这就是CSS的层叠行

### 优先级 ###

> 不同的选择器具有不同的优先级,优先级高的选择器样式会覆盖掉优先级低的选择器样式

优先级的大小关系:  
`继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important`

*  !important要写在属性值后面 分号之前

如果是`复合选择器`,则需要通过权重计算的方式来决定那个选择器会生效  
在复合选择器中,会分别取比较 行内式 id选择器 类选择器和标签选择器的个数.  
比较的规则:

1.  从左往右比,如果比较出来大小,后面不用再比了.如果相同,就继续比较后面的.
2.  如果全部相同,就看谁写在下面,哪个写在下面听哪个的

`注意:!important如果不是继承,那么权重最高`

> 感谢你的观看!希望这篇文章能帮到你!  
> [web前端开发专栏][web]在不断更新中,欢迎订阅!  
> “愿与君共勉,携手共进!”  
> ![在这里插入图片描述][8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]

[b4f6c828c99642f8a3314afb9f752fb9.png]: https://img-blog.csdnimg.cn/b4f6c828c99642f8a3314afb9f752fb9.png
[4bc2e681791e4f299454cb3ed2e952ba.png]: https://img-blog.csdnimg.cn/4bc2e681791e4f299454cb3ed2e952ba.png
[web]: https://mp.csdn.net/mp_blog/manage/column/columnManage/12118781
[8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]: https://img-blog.csdnimg.cn/8fbf2a7f2d0e4db782e58035677a303d.png#pic_center