没加！important的时候第三行p后面加了空格之后第一段第二段都会变成红色，“简单”变为绿色。
加了！important之后也是一样的情况
<style type="text/css">
p{color:red!important;}
p .first{color:green;}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<span class="first">简单</span>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
2016-11-02
首先first在你的命令里代表两部分内容：第一段P标签的内容和“简单”。所以要分析你的问题得分为两部分看：
对于第一段P标签内容来说，p{color:red!important;}和p .first{color:green;}会执行前者，因为加了!important指令，权限比后者高，哪怕p权值（1分）的比p.first的权值（11分）低。
对于“简单”来说，p{color:red!important;}和p .first{color:green;}会执行后者，因为前者的作用对象不包含<span class="first">，而是<p>，后者的作用对象才包含<span class="first">，所以哪怕前者再加两个!important也不会有作用。
你可以试试在p{color:red!important;}和p .first{color:green;}之间加一条指令：.first{color:yellow!important}，就会发现第一段P标签的内容和“简单”都变成了黄色。
我也是初学者，不知道说的是不是清楚标准~~互相学习
举报
