CSS-0_2 CSS和继承（inherit & initial）

CSS-0_2 CSS和继承（inherit & initial）
文章目录
- CSS的层叠和继承
- inherit
  initial
  很多你以为的样式初始值，其实是用户代理样式
  
  碎碎念
CSS的层叠和继承

在上一篇 CSS和层叠、样式优先级里已经讲过了层叠和优先级之间的关系，但是在CSS中的层叠除了体现在争抢露脸机会的优先级之外，还体现在属性的延续性上

就像这样：
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div class="blue_word">
    <h1 id="h">我是div1中的文字h1>
div>
body>
html>

<style>
    .blue_word {
        color: blue;
    }
style>
```
道友你有没有想过，为什么明明被选中的是外层元素的类选择器，可内部的元素的字体颜色也跟着变了？

事实上这是CSS中的一个性质，我们管他叫继承。对，css中的样式继承

在一些属性没有指明属性值的情况下，css会自动让他应用父元素的对应样式。但并不是所有的属性都会被继承，通常来说只有跟文本有关系的，比如 font-*，color，text-* 等等。以及一些列表相关的属性会被继承

跟盒模型有关的内容，比如margin、padding、border之类的属性则不会，也不应该被继承

但是如果你硬要让一个不会被继承的属性去继承，那可以使用关键字——inherit

inherit

inherit，本身就是继承的意思，这个关键字简单明了。使用这个关键字后，所指定属性的属性值将会和父元素一致

最常见的用法，是用在统一那些被用户代理样式带偏的特殊标识，比如标签

就像这样：
```
DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
        <p>
            我是p标签里的内容：<a href="#">我是a标签里面的内容a>
        p>
    body>
html>

<style>
    p{
        color: green;
    }
    p a{
        text-decoration: none;
    }
style>
```
我明明希望整个p标签里面的文字都是绿色的，但是由于a标签的用户代理样式为他指定了color属性，所以他不会继承标签的color样式（这不是因为优先级的问题）。我希望a标签里面的字体颜色跟着p标签走，这样我改颜色的时候就不用改两个地方

所以这时候我们不会这样做：
```
p,p a{
    color: green;
}
p a{
    text-decoration: none;
}
```
而是会这样做：
```
p{
    color: green;
}
p a{
    color:inherit;/*继承p的color属性*/
    text-decoration: none;
}
```
他们的效果都是一样的：

initial

当你希望把某个属性还原到最原始的状态时，可以使用initial关键字

比如说，还是用a标签举例，如果上例变成这样：
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<p>
    我是p标签里的内容：<a href="#">我是a标签里面的内容a>
    <br>
    <a href="#" id="a2">我是第二个a标签里面的内容a>
p>
body>
html>

<style>
    p{
        color: green;
    }
    p a{
        color:inherit;
        text-decoration: none;
    }

    #a2{
        color: initial;
    }
style>
```
前面的部分没有改，但是我们新加入了id值为a2的a标签，并把她的color值初始化（因为id选择器优先级更高，所以这个initial是一定生效的）。那么问题来了，这时候a2的文字应该是什么颜色呢？

我相信会有道友回答蓝色，但事实上，他是黑的：

为什么会回答蓝色，因为a标签不经过任何处理的情况下就是蓝色字体啊

可你想过没有，a标签的蓝色字体是用户代理样式给他的，而不是说a标签本身就是蓝色字体

initial关键字的作用，是把对应的属性值重置，而不是重置成用户代理样式

他是跟着具体属性走的，跟任何标签都没有关系，color属性的初始值，就是黑色

 很多你以为的样式初始值，其实是用户代理样式

如果你对initial的这一特性不了解，那就会对他的一些行为觉得很诡异，比如这个：
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div>Adiv>
body>
html>

<style>
    div{
        background: skyblue;
    }
style>
```
理论上来说，就算我把下面的样式改成这样：
```
div{
    display: initial;
    background: skyblue;
}
```
我得到的页面也应该是一样的

可结果让人大跌眼镜：

这看起来就好像她变成了一个 行内元素 一样！

是的，他就是变成了一个行内元素，根据 MDN 的说明，display这个属性的初始值应该是：inline，哪怕是div也不例外

——https://developer.mozilla.org/zh-CN/docs/Web/CSS/display

你可以理解成 initial 这个关键字针对的是当前这种属性，跟元素无关。事实上不同的标签对css指定样式来说确实没有什么关系，他们对css来说只在标签选择器里起作用而已

 碎碎念
- css的一些属性是可以自动继承的，但是这些属性大都是文本相关和列表相关的属性
- 你可以通过inherit关键字强制让某个属性继承父元素的值
- 你可以通过initial关键字把指定的属性重置，这种重置不是重置成用户代理样式
万分感谢您看完这篇文章，如果您喜欢这篇文章，欢迎点赞、收藏。还可以通过专栏，查看更多与【CSS笔记】有关的内容
相关阅读:
吃透MySQL（十四）：主从延时问题
 百度一高级经理因违反竞业协议被判赔107万；苹果、谷歌和微软扩大对无密码登录的支持；Firefox 100 发布|极客头条
 .NET 不受美国出口管理条例(EAR) 的约束
 Coredump-N: C pclose core dump
聚焦云原生安全|如何为5G边缘云和工业互联网应用筑牢安全防线
 澎湃OS上线：小米告别MIUI，跟小米汽车Say Hi
【力扣：1504】统计全1子矩阵
 大数据分析实践 | 过滤和抽样
 Linux学习-42-查看文件系统信息dumpe2fs命令用法
 时间复杂度
原文地址：https://blog.csdn.net/weixin_39241202/article/details/139731961

文章目录

CSS的层叠和继承

inherit

initial

很多你以为的样式初始值，其实是用户代理样式

碎碎念