CSS-继承、层叠、优先级【看这一篇就够了】

是洋洋a

已于 2024-08-31 13:08:18 修改

阅读量617

点赞数 26

分类专栏：前端 CSS 文章标签： css 前端

于 2024-08-31 13:03:57 首次发布

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/141744074

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 1 订阅

订阅专栏

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>

效果：

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

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

<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>

效果：

如何查看元素的默认值

要了解一个属性的默认值，可以把这个属性值设置为”initial“，然后审查元素，设置面板可以看到其默认值，如”colo:initial;“

可继承属性和不可继承属性

可继承属性

文本相关的属性普遍具有继承性

字体系列：font-size、font-famliy、font-style、font、font-weight
文本系列：color、text-align、text-indent、line-height、word-spacing、leeter-spacing、text-transform
列表布局属性：list-style、list-style-type、list-style-image、list-style-position、等
光标属性：cursor光标显示何种形态
元素可见性：visibily设置元素可见

不可继承属性

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

一些特殊情况下的继承

a标签的color值默认不继承

<a>标签是个例外，他的color值不会从父元素中继承，即没有指定的话，默认为“蓝紫色”

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

效果：

line-height的继承性

line-height的值有三种单位，继承时也不一样：

父元素line-height值继承规则子元素hieght-line值
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>

body标签样式初始化

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

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

设置继承性

默认不继承的属性想要继承，可以把属性值设置为“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>

效果：

CSS层叠性

层叠是CSS的一个基本特征，它是一个定义了如何“合并多个CSS规则的属性值”的算法
它在CSS中处于核心地位

什么是层叠性

下面这个例子：

有两个CSS规则同时作用于同一个div标签，那么最后这个div中的属性值是如何合并后计算的，以谁为主呢？这就需要一套规则来解释，这个规则就是“CSS层叠性”

	<style>
		/* css规则1 */
		.box {
		  color: red;
		  font-size: 30px;
		}
		/* css规则2 */
		div {
		  color: blue;
		}
	  </style>
	  <body>
		<div class="box">鞠婧祎</div>
	  </body>

效果：

层叠性解读

层叠性是指多个CSS规则同时作用于同一个标签时，效果“叠加”，并不完全覆盖
CSS的层叠性有两层含义：“叠加”和“覆盖”
不同选择器作用于同一元素，不同属性会“叠加”，相同属性会“覆盖”
在“覆盖”时需要遵循：“就近原则”、“优先级”

CSS的叠加原理

不同选择器作用于同一元素，不同属性会叠加作用于元素

	<style>
		/*
			  以下三个选择器中的样式属性都不一样，则会叠加
			  最后div效果：
				  背景颜色:黄色
				  字体大小：20像素
				  字体颜色：红色
		  */
		div {
		  background: yellow;
		}
		#box {
		  font-size: 20px;
		}
		.box {
		  color: red;
		}
	  </style>
	  <body>
		<div class="box" id="box">文本内容</div>
	  </body>

效果：

CSS的覆盖原则

就近原则

当两个或多个“优先级相同”的选择器作用到同一个元元素时。如果出现相同的“属性”则以写在后面的选择器中的“属性”为主
所谓的就近原则是指，离html元素最近的那个为主。本质和选择器谁写在后面以谁为主是一个意思

/*
    以下两个选择器的优先级一一样，
    则相同属性会覆盖，覆盖时，以写在后面的为主
    不同属性会叠加。
*/

div {
  /* background属性会叠加 */
  background: yellow;
  /* 无效 */
  color: blue;
}
div {
  /* font-size属性会叠加 */
  font-size: 20px;
  /* 选择器优先级一样，以后面为主，则此属性生效 */
  color: red;
}
/* 最终的CSS实际效果 */
/*
    div{
    background:yellow;
    font-size:20px;
    color:red; 
    }
*/

优先级

当两条或多条原则(选择器)作用到同一个元素，如果出现相同的属性，则以“优先级高”的为主

<style>
  /*
        基础选择器优先级从高到低分别是： id选择器 >class选择器 >标签选择器
        id优先级最高，则最后以id中的color:red为最终显示效果
    */
  #box {
    /* 生效 */
    color: red;
  }
  .box {
    /* 不生效 */
    color: blue;
  }
  div {
    /* 不生效 */
    color: green;
  }
</style>
<body>
  <div class="box" id="box">div中内容</div>
</body>

层叠性的冲突处理

不同CSS规则集同时作用于同一个标签，不同属性相互叠加，相同属性则会覆盖
相同属性覆盖，首先需要计算选择器的权重，最后以选择器权重高的为主
如果选择器权重相同，则写在后面的会覆盖现在前面的
如果想要实现的效果，因为选择器的权重低而不生效，则通过提高选择器权重来达到效果

	<style>
		/* id权重最高，样式全部应用 */
		#box {
		  width: 200px;
		}
		/*
			  .box与.box2权重一样，相同属性叠加，不同属性，以写在后面的为主
			  最后生效样式：
			  color:orange; background:skyblue; font-size:30px
		  */
		.box {
		  color: blue;
		  background-color: skyblue;
		}
		.box2 {
		  color: orange;
		}
		/*
			  div权重低于.box和.box2，相同属性叠加，不同属性，以权重高的为主
			  则color不生效，font-size属性生效
		  */
		div {
		  color: green;
		  font-size: 30px;
		}
		/*
			  计算后最终生效样式
			  width:200px;
			  color:orange;
			  background-color:skyblue;
			  font-size:30px;
		  */
	  </style>
	  <body>
		<div class="box2 box" id="box">文本内容</div>
	  </body>

效果：

CSS优先级

当多个CSS规则集同时作用于同一个HTML标签时，不同属性会叠加，相同属性会发生覆盖
在发生覆盖时，浏览器通过“选择器的优先级”来判断以哪个选择器中的属性值为主，从而在该元素上应用这些属性值。

单个CSS选择器的优先级权重

单个选择器权重从高到低为：“id选择器” -> “class选择器” -> “标签选择器” -> “通配符选择器”
不同类型的选择器有不同的分数值，分数值越高，选择器的权重越高，下表所示：

选择器的类型	实例	选择器权重	等级
!important	div{color:red!important;}	无穷大	特级
行内样式(style属性中样式)	style="color:red;"	1000	第一等级
id选择器	#id	0100	第二等级
class、伪类、属性选择器	.box、:hover、[type="text"]	0010	第三等级
标签选择器、伪元素选择器	div、::after、::before	0001	第四等级
通配符、子选择器、相邻选择器等	*、>、+、~	0000
继承的样式		0000

提示：

* 通配符的权重实际是要大于继承的样式的

复杂CSS选择器的优先级权重

优先级就是分配给指定的CSS声明的一个权重
选择器的优先级是由一个选择器中的每一种“选择器类型的数值(权值)” 相加的最终结果来决定
一个选择器的优先级是由四个部分相加计算得来的（数值越大，代表选择器的优先级越高）

选择器千位百位十位个位优先级
行内样式
如： 1 0 0 0 1000
div p 0 0 0 2 0002
#box div p 0 1 0 2 0102
.box .item h3 0 0 2 1 0021
.box:hover p 0 0 2 1 0021

选择器	千位	百位	十位	个位	优先级
行内样式如：`<p style="color:red"></p>`	1	0	0	0	1000
`div p`	0	0	0	2	0002
`#box div p`	0	1	0	2	0102
`.box .item h3`	0	0	2	1	0021
`.box:hover p`	0	0	2	1	0021

几个案例

案例1：

鼠标放在p标签上，文字会变成红色吗？

<style>
  /* 优先级 0011 */
  p:hover {
    color: red;
  }
  /* 优先级 0011 */
  .box p {
    color: blue;
  }
  /*
    两选择器优选级相同，都是0011 ，则以写在后面的为主，相同属性发生覆盖。
    则最终效果为 blue蓝色，鼠标滑上去文字并不会变色
  */
</style>
<body>
  <div class="box">
    <p>文本内容</p>
  </div>
</body>

答：

鼠标滑动到p上面，文字并不会变成红色

案例2：

以下案例中的p标签的最终显示效果是怎样的

<style>
  /* 优先级：100 */
  #title {
    color: red; /*生效*/
  }
  /* 优先级：20 */
  .box .title {
    /* 不生效，以#title为主 */
    color: blue;
  }
  /* 优先级：10 */
  .title {
    /* 生效 */
    font-size: 16px;
  }
  /* 优先级：2 */
  div p {
    /* 不生效，以.title中为主 */
    font-size: 40px;
  }
</style>
<body>
  <div class="box">
    <p id="title" class="title">p中内容</p>
  </div>
</body>

答：

案例3：

标签中的文字最终是什么颜色？

<style>
  /* 单个选择器类型优先级从高到低：id  > class > 标签 */
  /* 优先级 0201 */
  #box1 #box2 p {
    color: red;
  }
  /* 优先级 0212  三个中优先级最高，则以他为主 */
  #box1 div.box2 #box3 p {
    color: green;
  }
  /* 优先级 0031 */
  .box1 .box2 .box3 p {
    color: blue;
  }
</style>
<body>
  <div class="box1" id="box1">
    <div class="box2" id="box2">
      <div class="box3" id="box3">
        <p>我是一个段落标签</p>
      </div>
    </div>
  </div>
</body>

答：

绿色

总结

在进行选择器权重计算时不允许进行进位
例如，20个类选择器仅仅意味着20个十位，而不能视为2个百位，也就是说，无论多少个类选择器的叠加，都不会超过一个ID选择器
在比较选择器优先级时，从左向右比较。

!important 提升权重

当在一个样式声明中使用一个“!improtant”规则时，此声明将覆盖任何其他声明，包括行内样式
虽然，从技术上讲，!important与优先级无关，但它与最终的结果直接相关

<style>
  div {
    color: red !important;
  }
  #box {
    color: orange;
  }
</style>
<body>
  <div style="color: blue">文本内容</div>
</body>

效果：

注：

只要CSS声明属性值的后面带有!important就一定以它为主

慎用!important

慎用!important，因为这会带来样式冲突。后面某个地方，需要重写这个样式时，会发现根本无效。
在某些情况下是一定要用的，比如之前学的自定义字体，font-famlit属性后面加了!important关键字

添加!important的属性，如果可以继承，那么优先级仍然按照“普通继承(0000)”来计算，并不会造成子孙元素也强制!important

	<style>
		#box {
			height: 100px;
			background-color: red !important;
		}
		#box1 {
			height: 50px;
			background-color: aqua;
		}
	</style>
	<body>
		<div id="box">
			<div id="box1"></div>
		</div>
	</body>

效果：

测试题

1.看代码回答三个问题

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

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

答案：

中的文字并不会放变红，因为选择器{.box p span}的优先级是(0012)，而选择{span:hover}的优先级是(0011)，因此{span:hover}无效，但是会变大（只有{span:hover}中出现了font-size属性）

/* 方法一:修改原先选择器 */
<style>
  .box {
    font-style: italic;
  }
  .box p span {
    color: blue;
  }
  .box p span:hover {
    color: red;
    font-size: 30px;
  }
</style>
<body>
  <div class="box">
    <p><span>我是span中内容</span></p>
  </div>
</body>

/* 方法二:使用id选择器 */
<style>
  .box {
    font-style: italic;
  }
  .box p span {
    color: blue;
  }
  #myspan:hover {
    color: red;
    font-size: 30px;
  }
</style>
<body>
  <div class="box">
    <p><span id="myspan">我是span中内容</span></p>
  </div>
</body>


/* 方法三:使用!important关键字 */
<style>
  .box {
    font-style: italic;
  }
  .box p span {
    color: blue;
  }
  #myspan:hover {
    color: red !important;
    font-size: 30px;
  }
</style>
<body>
  <div class="box">
    <p><span id="myspan">我是span中内容</span></p>
  </div>
</body>

文字一直为蓝色，鼠标移动到文字上时，会放大但不会变为红色

2.下面文字颜色是什么？

<style>
  .col {
    color: red;
  }
  div p span {
    color: blue;
  }
</style>
<body>
  <div>
    <p><span>span标签的文字颜色</span></p>
  </div>
</body>

答案：

颜色为蓝色，选择器{.col}并没有作用于标签

3.鼠标移动到a标签，a标签中文字能不能变成黄色

<style>
  /* 12 */
  li a:hover {
    color: yellow;
  }
  /* 12 */
  .list li a {
    color: orange;
  }
</style>
<body>
  <ul class="list">
    <li><a href="">艾编程</a></li>
  </ul>
</body>

答案：

不能变成黄色，两个CSS选择器的优先级都是(0012)，故遵循“就近原则”，选择器{,list li a}离<body>标签更近(在下面)，所以不会变成黄色

4.以下的li和a中的文字的颜色区别

<style>
  /* 2 */
  ul li {
    color: red;
  }
  /* 2 */
  ul > li {
    color: orange;
  }
</style>
<body>
  <ul class="list">
    <li>点击进入<a href="">艾编程</a></li>
  </ul>
</body>

答案：

两个选择器的优先级都是(0002)，故遵循“就近原则”，<li>中的文字颜色为“orange橘色”

5.CSS美化开关按钮

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.check-button {
			width: 60px;
			height: 26px;
			padding: 2px;
			background-color: #ddd;
			border-radius: 20px;
		}
		input {
			display: none;
		}
		.check-button::after {
			display: inline-block;
			content: "";
			width: 26px;
			height: 26px;
			background-color: #fff;
			border-radius: 100%;
		}
		input:checked ~ .check-button {
			background-color: skyblue;
		}
		input:checked ~ .check-button::after {
			float: right;
		}
	</style>
</head>
<body>
	<label for="my-button">
		<input type="checkbox" id="my-button">
		<div class="check-button"></div>
	</label>
	<br>
	<label for="my-button2">
		<input type="checkbox" id="my-button2">
		<div class="check-button"></div>
	</label>
</body>
</html>

效果：