前端开发系列（九）CSS教程（4）

妖狐艹你老母 2021-09-28 02:32 322阅读 0赞

# 一、 CSS的继承、层叠和特殊性 #

## 1.1、继承 ##

> **CSS** 的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定 **html** 标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于 **p标签**，这个颜色设置不仅应用 **p标签**，还应用于 **p标签** 中的所有子元素文本，这里子元素为 **span标签**。  
> `p{color:red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>`  
> **p** 中的文本与 **span** 中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如**border:1px solid red;**

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>继承</title>
    		<style type="text/css">
    			p{color:red;}
    			p{border:1px solid red;}
    		</style>
    	</head>
    	<body>
    		<h1>勇气</h1>
    		<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    		<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]  
> 在上面例子中它代码的作用只是给 **p标签** 设置了边框为1像素、红色、实心边框线，而对于子元素 **span** 是没用起到作用的。

## 1.2、特殊性 ##

>  有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

p{
    	color:red;
    }
    .first{
    	color:green;
    }
    <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

> **p** 和 **.first** 都匹配到了 **p** 这个标签上，那么会显示哪种颜色呢？**green**是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种 **css** 样式的，权值高的就使用哪种 **css** 样式。  
> **下面是权值的规则：**  
> 标签的权值为**1**，类选择符的权值为**10**，ID选择符的权值最高为**100**。例如下面的代码：

p{color:red;}          /*权值为1*/
    p span{color:green;}   /*权值为1+1=2*/
    .warning{color:white;} /*权值为10*/
    p span.warning{color:purple;} /*权值为1+1+10=12*/
    #footer .note p{color:yellow;} /*权值为100+10+1=111*/

**注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。**

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>特殊性</title>
    		<style type="text/css">
    			p{color:red;}
    			.first{color:blue;} /*因为权值高显示为蓝色*/
    			span{color:red;}    /*设置为红色*/
    			p span{color:greenyellow;}
    		</style>
    	</head>
    	<body>
    		<h1>我的梦想</h1>
    		<p class="first">我的梦想<span>火之意志</span></p>
    		<p id="second">我的梦想</p>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190108200921778.png]

## 1.3、层叠 ##

>  我们来思考一个问题：如果在 **html** 文件中对于同一个元素可以有多个 **css** 样式存在并且这多个 **css** 样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。  
> **层叠** 就是在 **html** 文件中对于同一个元素可以有多个 **css** 样式存在，当有相同权重的样式存在时，会根据这些 **css** 样式的前后顺序来决定，处于最后面的 **css** 样式会被应用。

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>层叠</title>
    		<style type="text/css">
    			p{color:red;}
    			p{color:blue;}
    		</style>
    	</head>
    	<body>
    		<h1>勇气</h1>
    		<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    		<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span>简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]

## 1.4、重要性 ##

> 我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用 **!important** 来解决。

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>!important</title>
    		<style type="text/css">
    			p{color:blue!important;}
    			p.first{color:red;}
    		</style>
    	</head>
    	<body>
    	  <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190108201828487.png]

--------------------

**此篇博客代码下载地址：[CSS教程4代码下载][CSS_4]  
博主的所有博客目录如下：[博客文章目录汇总][Link 1]  
Java面试部分的博客目录如下：[Java笔试面试目录][Java]**

> **转载请标明出处，原文地址：[https://blog.csdn.net/weixin\_41835916][https_blog.csdn.net_weixin_41835916] 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]: /images/20210923/ab00495b66b2486399d946859450e827.png
[20190108200921778.png]: /images/20210923/b96cf86848f94db2baaa93081594af55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]: /images/20210923/dc30a928023c40d2abe6bbc2d13a32ad.png
[20190108201828487.png]: /images/20210923/de39ce1752ab47fa9aa052fc9d5654d8.png
[CSS_4]: https://github.com/longjiahao666/Web/tree/master/Code1/css/css4
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[https_blog.csdn.net_weixin_41835916]: https://blog.csdn.net/weixin_41835916
[70]: /images/20210923/301187758b3a460484eedaab5c72431b.png