在这节里
p{color:red!imoprtant:}
加上！important后 全文变红
但是去掉下方p.first{color:green:}前的p
发现绿色设置对第二段的简单依然有作用是为什么
-----------------------由于至此回答的答案不能解决问题，因此补充-------------------------------
由此开始：
<style type="text/css">
p{color:red!important;}/*权值变为最高*/
p.first{color:green;}/*类选择器 权值为10*/
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span class="first">简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>
由于上面的权值比较高所以全文为红色 包括第一段和第二段所有文字
那么修改下css样式 将上文中p.first去掉p 改为.first
<style type="text/css">
p{color:red!important;}/*权值变为最高*/
.first{color:green;}/*类选择器 权值为10*/
</style>
修改完以后发现全文依然会变红 但是正文第二段中的<span class="first">简单</span> 依然会被.first作用为绿色
这里我的问题是，为什么去掉p以后 正文第二段的简单依然会变为绿色 上下两段css的权重到底怎么算
请各位赐教，不胜感激。
不去p,!important权重最高，全为红色，span中继承了p的颜色属性也为红，此时类选择器定义的为父元素，对子元素span无意义。去掉后，继承红色权重0.1，span类选择权重10，故呈现绿色。不知这样理解对不对。
先看“p.first{}”和“p空格.first{}”的区别，前者选中的是第一个p段落，后者选中的是p段落中的后代子元素。在没有加上“!important”时，先加上空格，因为内部元素的优先级更高，全段除了“简单”2字都为红色；去掉空格，第一段绿色第二段红色，说明跟权值没关系，不加空格的p.first{}就是指定了第一个段落。现在我们加上“!important”,先加上空格，内部元素的优先级更高，所以有“简单”为绿色全文为红色；去掉空格，全文自然都是红色
我是这样理解的
.first{color:green;}和p.first{color:green;}以及p. first{color:green;}（加了空格）
其中没加空格的话、是没有包含的、也就是说.first的对象是p标签元素，没有作用于span标签。
加了空格之后包含了span标签。
而由于p{color:red!important;}的存在、p标签元素的最高权值是这个。
但是span标签元素的红色效果是继承的、继承的权值很小，所以加了空格之后可以显示.first内的修饰效果。
如果不加p的话、更好理解了，就是因为第一个<p class="first">是在<p>内的所以被!important影响了权值。
但是<span class="first">的话、没有被!important影响权值问题，只是有个继承效果。
所以最后显示了.first的修饰效果。
不知道对不对、我自己总结的、还希望有大神出来拉我一把...谢谢。
我是这样想的，因为有p，所以两个p中有!important的最大，应用它的属性。当把下面的p去掉后，上面的对于下面而言是继承，所以只有0.1，而类选择器有10，所以简单就是绿色的了。（不知道是不是这样理解，有错误还请大神们指出）
我也有同样的疑问
按照标签的重要性判断
!important 你就看成他的地位最高
因为有一个权重。。加了 ！important 以后 权重会增加， 也就会全部以此为主， 如果不加!important p{} 的权重没有 p.first{} 大 所以后面又以p.first{}为主