文字颜色变化
暮女神
2016-11-02 12:57
没加！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>
4回答
-
- 要么庸俗
- 2016-11-02 17:32:14
相当于声明放在最下面
-
- ShowTime4328112
- 2016-11-02 17:26:22
我测试了一下，把p{color:red!important;}去掉，然后在p.first{color:green;}中p不加空格时，只有第一段绿色，加空格时只有简单两个字绿色，也就是没有空格时只作用于第一段，有空格时只作用于简单两个字，这就能解释为什么无论加了！important与否，第一段和第二段都是红色，简单为绿色了。但是还是不太懂为什么p .first只作用于简单二字，不作用与第一段这不是后代选择器吗
-
- 慕粉4264339
- 2016-11-02 14:41:46
首先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标签的内容和“简单”都变成了黄色。
我也是初学者，不知道说的是不是清楚标准~~互相学习
-
- 蓝袍4296888
- 2016-11-02 13:28:45
!important ..相当于声明放在最下面，只是同分数优先，。。p .first 11分。。p 1分。。
初识HTML(5)+CSS(3)-升级版
1223116 学习 · 18212 问题
相似问题