<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>
p.first相当于你给class="first”的p标签设置了样式，
p空格.first相当于p span,这就意味着你给span标签设置了样式，
p{...!important;}
p{...;}
span{...;} //!important只会影响p标签，不会影响span标签
出现重复的意思了，所以代码会以后面的样式为准
这是因为出现了层叠，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
p后加空格并不会出现你所说的情况，而是一二段文字都变为红色，因为第二行代码中p标签属性优先级自定义最高。
加空格变包含选择器，对fist和second都起作用