CSS 三大特性：继承、层叠性、优先级

TIP

我们实际的开发中，经常会遇到 CSS 应用时的冲突问题。比如本来应该产生效果的样式没有生效，或有时候不想要的效果硬实现了，为什么会产生这种效果，我们搞不清原因。

接下来我们要学的 CSS 三大特性：继承性、层叠性、优先级就是为解决这些问题而来的。

但是在学习之前，我们先来看一个 CSS 样式发生冲突的案例，看下在这个案例当中会发生哪些样式冲突，带着这些问题我们再来学习，效果会更好。

CSS 样式发生冲突案例：

<style>
  .box {
    font-style: italic;
  }
  /* 优先级 0012 */
  .box p span {
    color: blue;
  }
  /* 优先级 0011 */
  span:hover {
    color: red;
    font-size: 30px;
  }
</style>
<body>
  <div class="box">
    <p><span>我是span中内容</span></p>
  </div>
</body>

思考以下 3 个问题，并给出答案：

鼠标滑动到 span 上时，span 中的文字有没有放大和变红？为什么？
如果鼠标滑动到 span 上时，想实现文字变红，如何修改代码，达到效果？

一、CSS 继承性¶

TIP

关于 CSS 的继承性，你将会学习到

什么是 CSS 的继承性
CSS 继承性遵循“就近原则”
可继承和不可继承属性分别有哪些？
a 标签的 color 值默认不继承
line-height 的继承性
body 标签样式初始化
设置继承性

1、什么是 CSS 继承性¶

TIP

CSS 的继承性是指特定的 CSS 属性会向下传递到子孙元素。

即祖先元素设置，后代元素即生效

<style type="text/css">
  .box {
    /* 宽 300px 无继承性 */
    width: 700px;
    /* 边框线 无继承性 */
    border: 1px solid red;
    /*
      color、text-align、font-size都有继承性
      都可以继承给到其子孙元素
    */
    color: red;
    text-align: center;
    font-size: 14px;
  }
  .box p {
    background-color: khaki;
    /* p 中自已设置了font-size，所以不会继承父元素的 */
    font-size: 20px;
  }
</style>
<body>
  <div class="box">
    <p>我的文字颜色红色和文字水平居中，都是继承于父元素 box的</p>
  </div>
</body>

渲染效果： ![[Pasted image 20260226170424.png]]

2、CSS 继承性遵循“就近原则”¶

TIP

如果元素自身没有设置某个具有可继承的属性，则会向他的父元素继承
如果父元素没有，则再往上继承父元素的父元素的这个属性，一层层向上找，如果找不到，就以默认的样式显示

<style>
  .box {
    /* width不可继承属性 */
    width: 400px;
    /* border不可继承属性 */
    border: 1px solid #666;
    /* text-align 可继承属性 */
    text-align: center;
  }
  .box1 {
    /* color 可继承属性 */
    color: blue;
  }
</style>
<body>
  <div class="box">
    <div class="box1">
      <h3>CSS继承性遵循“就近原则”</h3>
    </div>
  </div>
</body>

渲染效果： ![[Pasted image 20260226170533.png]]

如何查看元素的默认值

要了解一个属性的默认值，可以把这个属性值设置为 initial （如：color : initial ），然后审查元素，在 computed （计算样式）面板中可以看到其默认值。

也可以不设置该属性，然后审查元素，在 computed （计算样式）面板中可以看到其默认值

3、可继承和不可继承属性有哪些¶

可继承属性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效

字体系列：font-size、font-family、font-style、font 、font-weight
文本系列：color 、text-align、text-indent、line-height、word-spacing、letter-spacing、text-transform
列表布局属性：list-style、list-style-type、list-style-image、list-style-position 等
光标属性：cursor 光标显示为何种形态
元素可见性：visibility 控制元素显示和隐藏

不可继承属性

盒子模型：display、margin、border、padding、height、min-height、max-height、width、min-width、max-width
定位相关：position、left、right、top、bottom、z-index
浮动：float、clear
其它：background、overflow、table-layout、vertical-align、page-break-after、page-bread-before 和 unicode-bidi

4、a 标签的 color 值默认不继承¶

<style type="text/css">
  /* .box中文字为红色，
  但a标签没有设置color属性，也没有继承父元素的color属性，以默认值出现 */
  .box {
    color: red;
  }
</style>
<body>
  <div class="box">
    <a href="">我是超链接</a>
  </div>
</body>

渲染效果： ![[Pasted image 20260226170652.png]]

5、line-height 的继承性¶

TIP

line-height 的值有三种单位，在继承时的差异点

父元素 line-height 值	继承规则	子元素 line-height 值
50px	直接继承该值	50px
2	直接继承该比例	2
200%	继承%百分比计算后的值如果父元素 font-size: 20px; 则计算得到父元素 line-height 的值是 40px;	40px

<style>
  .box {
    width: 350px;
    height: 100px;
    background-color: pink;
    font-size: 30px;
    /* 情况一： 子元素直接继承父元素值 */
    line-height: 50px;
    /* 
        情况二：  子元素直接继承父元素值
        line-height:2;
    */

    /*
        情况三：  子元素继承%百分比换算后的值  200%*30=60px
        line-height:200%;
    */
  }
  .item1 {
    font-size: 20px;
    /* 情况一： 从父元素直接继承过来  line-height:50px;  */
    /* 情况二：从父元素直接继承过来 line-height:2; 最终2*20px  子元素行高为40px */
    /* 情况三：子元素继承父元素%百分比换算后的值60px ，所以子元素line-height:60px */
  }
</style>
<body>
  <div class="box">
    <div class="item1">直接继承父元素的line-height:50px;</div>
  </div>
</body>

6、body 标签样式初始化¶

TIP

因为文字相关属性有继承性，所以通常会设置 <body>标签的字号、颜色、行高等，这样就能当做整个网页的默认样式了。

/* 以下代码来自京东 你可能会有疑问，字体类型为什么没有引号引起来 */
body {
  font: 12px/1.5 "Microsoft YaHei", Heiti SC, tahoma, arial, "Hiragino Sans GB",
  sans-serif;
  color: #666;
}

7、设置继承性¶

TIP

默认不继承的属性想要继承，可以把属性值设为 inherit。表示这个属性的值继承父元素的。

扩展补充知识：

css 属性通常会有以下三个值：

initial 设置属性值和浏览器默认样式相同
inherit 属性值默认继承父元素
unset 它是关键字 initial 和 inherit 的组合，如果属性有继承性，则继承父元素，没有则为默认值

<style type="text/css">
  .box {
    width: 100px;
    height: 100px;
    /* 2px 实线 红色 边框 */
    border: 2px solid red;
  }
  .item {
    width: 50px;
    height: 50px;
    /* 边框是没有继承性的，所以要让他继承父元素的边框样式，就把值设为inherit */
    border: inherit;
  }
</style>
<body>
  <div class="box">
    <div class="item"></div>
  </div>
</body>

渲染效果： ![[Pasted image 20260226170905.png]]