a元素无法继承父元素？css属性值的确认你真的了解吗？
在我学css初期，并不知道属性值的确认这一行为。虽然也没有太大影响，网上各类视频教程也没有专业的讲解，可能它确实并不是特别重要吧。但敲代码时总是会为层叠的先后烦恼，有时候明明代码找不到毛病，但运行出来就是没有效果，只好换一种方式布局。直到偶然间接触到属性值这一名词，我犹如潜水数小时后终于出水一般畅快。我的天？我敲这么久代码都错过了什么？甚至感觉有一半的敲码时间简直浪费得冤枉。怀着偶然捡到的财宝一般的知识，在此和大家分享，也希望比我后学者能不走我走过的弯路。
属性值？有必要吗？
小张上大学后，很快爱上篮球这一运动，但刚接触篮球的他对很多东西一窍不通。由于身体素质强硬，还是结识了很多志同道合的球友，这让他这个新人得到了很多前辈的指导。
这天，他想给自己买一双像样的球鞋，可上网之后就懵逼了，五花八门的球鞋让他迷昏了眼，有点担心自己会掉进各种坑里，就在微信上问校队的明哥。
小张问老安：“明哥，我想买球鞋，有什么要注意的没？”
明哥回答：“安塔的某某A鞋挺不错的，包裹性好鞋底还是闪能科技，缓震能力没得说”。
小张大喜，心想，幸亏问了明哥。
第二天早上上课，小张碰见同学老刘，想起来老刘前段时间说他参加了什么某省的比赛，就问黑子：“老刘，听说你参加了篮球比赛啊，打球经验肯定很丰富了，我最近也想买双球鞋，你们队里都是穿的什么鞋啊？”
老刘说：“肯定是奶克推出的明星球鞋啊，你看我这双沾穆斯19，xdr橡胶，这抓地力杠杠的，我穿上急刹换向啥的晃到几个人不在话下。”老刘说着，把脚伸出来给小张看鞋。
小张边看边说：“有道理，有道理，还是老刘专业。”可他心里面却犯嘀咕，怎么回事儿啊这是，明哥和老刘的鞋都好有吸引力，好难抉择啊。
小张决定找一位资深的球友问问，想来想去，想到他的高中同学鹏子，他常年打球，国家级比赛都有好几次了，年年都是主力，当年可是保送的体育特长生。于是中午吃饭时，他用微信发了条消息给鹏子：“鹏子啊，我最近想买双球鞋，你是专业的，给我点建议啊？”
过了一会儿，鹏子发过来一条消息：“你先回答我几个问题：1）你在球场上是什么位置？中锋后卫还是前锋？2）你身高、体重各是多少？3）体力如何？4）你更注重投球还是上篮？5）有没膝关节受伤、腰椎间盘突出等情况？6）准备在哪里打球？塑胶场地、室内、水泥马路还是别的？……”
小张一看鹏子连珠炮式发出的12个问题，不禁叫了一声“天呐”。
好啦，现在请你回答一个问题：明哥、老刘和鹏子，这三个人，哪一位更专业？
如果我没猜错，你的答案和我一样：鹏子更为专业。
为什么呢？
庖丁解牛用在这里再合适不过了。
再映射到我们敲代码时遇到的问题。你是否有过一个方案行不通，没办法换另一种方案，一直换到合适为止。的确，能达到目的的代码不止一条，但你最终也没有弄清为什么其他方案行不通的原因。就像故事里的小张，可能小张的打法和明哥老刘不一样，小张穿明哥的鞋会崴脚，或是用老刘的鞋会感觉太笨重。小张没办法只好一双鞋一双鞋地试最终才知道适合自己的鞋，但这无疑浪费了很多时间和金钱。
而鹏子就不一样了，他懂得从问题的原理入手，他知道选鞋的标准有什么，所以他能让小张更快的选到合适他的鞋。
我刚学css没多久时，便发现一个问题，无论a元素的父元素是什么颜色，a元素都无法继承。但我直接给a元素赋值后便可以给a元素改颜色了，所以我并没有深究这个问题。直到最近我接触到声明值计算这一名词后，才恍然大悟。令我惊奇的是网上竟没有专业的讲解这一知识点，我个人认为这一基础还是很重要的，特意码了这篇文章讲解属性值计算，小白专属，大佬随意。
今天要解决的是属性值确认的问题，网上很多教程都提出了层叠继承或是其他东西的先后顺序，但都没提到属性值计算这一关键点。导致很长一段时间我都是按照学的死方法套上去，直到接触到属性值这一名词后我才开始按自己的理解去判断样式的确认方法，可能一开始很慢，但无疑熟练这种方法之后绝对受益匪浅。
属性值是什么问题的入手点？
当你为元素标签添加样式时，你添加的便是属性值了，如下图所示：
<p style="color: red;">举个例子</p>
这里的“red”便是属性值
属性值，说简单点，就是标签元素的样式。所以说属性值应该是确定样式的入手点，这就不得不提到层叠和继承了，但这是下文的问题，我们先来继续了解属性值。
css的功能就是给标签元素加上开发者希望有的样子，说明确点应该是改变标签的样式。为什么说是“改变”而不是“添加”，这里就要提到一个很关键的角色–默认值。
需要说明的是，实际上我们可以理解浏览器对每个标签元素有两种默认值，一个是对特定标签的特定默认值（比如a元素浏览器默认为下划线等等），我们暂且称为“特殊默认值”，还有一个是浏览器给每个标签都设下的通用默认值，这里就是很多复杂且新手不会接触的属性值了，我们暂且称为“通用默认值”。
实际上浏览器早早便给每个标签确定了属性值（我学了一个月css才知道，丢人）。而css开发者的工作只是改变这些属性值罢了。从开发者角度来说，当然觉得自己给的指令应该高于默认值的地位（比如浏览器默认p元素是黑色字体，但开发者用css把p元素改成红色后，浏览器就会听从开发者的指令而不是显示默认值），但是，其实并不是这样，这就要讨论浏览器对属性值的计算先后顺序了。
属性值计算过程（单个元素）
-
第一步：确认声明值
在这里要特别强调所谓“声明值”的意思，即开发者直接定义的属性值和浏览器的特殊默认值。开发者直接定义的属性值包括行内、内嵌、单独文件、ID、类名等。
-
第二步：层叠
-
所谓层叠，即为解决css开发中产生冲突的声明值。声明值冲突是每个开发者都会利用的一个技巧。这能处理相同意义的元素中需要特殊效果的元素。层叠不在今天讨论的范围
-
第三步：继承
-
子元素继承父元素的某些属性值，也是开发者乐意运用的技巧，当子元素有很多效果相同时，开发者更乐意直接在父元素中声明元素的属性值。
-
第四步：确认通用默认值
-
当某个标签元素不满足以上三条确认属性值的方法时，浏览器才会给元素赋上通用的默认值。
属性值计算过程（整体）
这部分内容作为补充，了解就好，对本文章内容关系不是太大。
当浏览器扫描html以及css文件时。
从head元素到body，先扫描完这两个大整体后，再扫描head中的小标签，最后才是body中的小标签 。
举个例子
<style type="text/css">
.class1{
font-size: 10px;
}
</style>
<body style="color: red;">
<a href="www.woshigelizi.com">举个例子</a>
</body>
我们先把a元素的最初状态列出来，
a元素的属性值：
color：
font-size：
display：
float：
left：
margin-top：
其他属性值......
首先浏览器确认样式表中无冲突的声明，比如浏览器的特殊默认值display：block，还有a标签特有的特殊默认值color：#0000EE（记住！浏览器对a元素有特殊的默认值color！）于是第一步后a的属性值得到了一部分确认：
a元素的属性值：
color：#0000EE
font-size：
display：block
float：
left：
margin-top：
其他属性值......
第二部，处理层叠冲突
层叠即确认样式表中有冲突的声明这里我们设定的font-size：10px与浏览器的特殊默认值产生冲突，浏览器通过优先级确认为我们的10px为最终值。
a元素的属性值：
color：#0000EE
font-size：10px
display：block
float：
left：
margin-top：
其他属性值......
第三部，继承
注意，这里a元素并不能继承父元素body中的color值。思维中没有经过属性值计算过程的同学可能就会很懵逼了。
“我并没有设定其他任何color值啊，为什么这个父元素值继承不了？”。
究其原因早早在第一步浏览器的特殊默认值便通过了计算并赋上了a元素。所以这一步a元素得不到color的继承。
a元素的属性值：
color：#0000EE
font-size：10px
display：block
float：
left：
margin-top：
其他属性值......
属性值不变
第四步，确认通用默认值
这一步可以理解为浏览器为开发者善后。要知道每个元素必须每个属性值都有值才能显示出来，而所有属性值加起来有几百个，开发者当然不能每个值都赋值，所以就要交给浏览器来善后啦。
a元素的属性值：
color：#0000EE
font-size：10px
display：block
float：none
left：auto
margin-top：8px
其他属性值......
这样，所有属性值都确认完毕后，一个元素的属性值计算才算完成。
4279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
