CSS的三大特性（继承，层叠和优先级）

小小潘不放弃

已于 2022-03-07 20:38:45 修改

阅读量570

点赞数

分类专栏： CSS进阶文章标签： css 前端继承

于 2022-02-23 11:30:00 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123071921

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

继承性
层叠性
优先级

继承性

CSS的继承性是指子元素继承了父元素的某些样式属性。但并不是所有的属性都能继承。

不能继承的属性：border，padding，margin

能继承的属性可以分为三类：

1 文本相关属性：font-family(字体），font-size(字体大小）,font-style（字体风格）,font-weight（字体粗细）,font（字体的复合属性）,line-height（行高）,text-align（对齐方式）,text-indent（首行缩进）,word-spacing（间距）。
2 列表相关属性：list-style（列表的复合属性），list-style-image（自定义列表项符号），list-style-position（符号的位置和对齐方式），list-style-type（列表项符号的类型）。
3 颜色的相关属性：color

超链接的特殊性

看以下例子

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>a标签的特性</title>
  <style type="text/css">
  div{
	  color:red;
  }
  </style>
 </head>
 <body>
	 <div>
		 <p>点击下方文字</p>
		 <a href="https://cn.bing.com">此处是一个超链接</a>
 </body>
</html>

在这里插入图片描述
根据程序运行的结果显示超链接字体并没有继承父元素，呈现红色。打开开发者工具，发现原本的红色被划掉了，这是因为a元素本身有默认的样式，优先级高于继承的颜色。

解决办法

在a元素中使用color：inherit即可。

<a style="color:inherit" href="https://cn.bing.com">此处是一个超链接</a>

在这里插入图片描述

层叠性

CSS全称是Cascrading Style Sheet（层叠样式表），层叠就是样式的覆盖。对于同一个元素来说，如果我们重复定义多个相同的属性，且权重相同时，遵循后来居上的原则。当权重不同时，值高者优先。这个就要提到CSS的优先级了。

优先级

当样式发生冲突时，以优先级高的为准，以下介绍四种常见的冲突。

引用方式冲突

行内样式>(内部样式=外部样式）
当某一元素的相同属性既有内部样式也有外部样式时，遵循后来者居上的原则。

继承方式冲突

最近的祖先元素为先。

指定样式冲突

指定样式指的是当前元素的样式，发生冲突时权重高者获胜。CSS各种选择器的权重如下表：

选择器	权重
通配符	0
伪元素	1
元素选择器	1
class选择器	10
伪类	10
属性选择器	10
id选择器	100
行内样式	1000

在实际的应用中，可能会因为没有真正理解当前元素的含义而弄错真正的样式，例如以下例子：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>权重</title>
  <style type="text/css">
  #fontcolor{
	  /* 权重为100 */
	  color:red;
  }
  #fontcolor .inner{
	 /* 权重为100+10=110； */
	  color:blue;
  }
  #fontcolor p span{
	/*  权重为100+1+1=102 */
	  color:black;
  }
  #fontcolor p span strong {
	/*  权重为100+1+1+1=103; */
	  color:green;
  }
  </style>
 </head>
 <body>
	 <div id="fontcolor">
		 <p class="inner">
			 <span><strong>到底是什么颜色呢</strong></span>
		 </p>
	 </div>
 </body>
</html>

可能会有人觉得字体为蓝色，因为计算出来的权重最高。
但我们需要注意的是，这是针对strong元素来说的，权重最高的是绿色，所以字体应该是绿色。#fontcolor .inner{}针对的是p元素，属于继承样式。在CSS中，选择器权重的计算只针对指定样式即当前元素，并不能用于继承。
在这里插入图片描述

当我们删掉上例中的#fontcolor p span strong{}，字体显示为黑色，原因是继承了span元素的颜色。
在这里插入图片描述

！important

如果一定要使用某种样式，可以使用！important来覆盖所有其他的样式。
例如：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>权重</title>
  <style type="text/css">
  strong{
	  color:red !important;
  }
  #fontcolor p strong{
	/*  权重为100+1+1=102 */
	  color:black;
  }
  #fontcolor p span strong {
	/*  权重为100+1+1+1=103; */
	  color:green;
  }
  </style>
 </head>
 <body>
	 <div id="fontcolor">
		 <p class="inner">
			 <span><strong>到底是什么颜色呢</strong></span>
		 </p>
	 </div>
 </body>
</html>