章节
问答
课签
笔记
评论
占位
占位

为所欲为 - 选择器最高层级!important

我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。

如下代码:

p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意:!important要写在分号的前面

这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

任务

任务:我也来试试,使用!important语句来改变样式权重

1.在右边编辑器的第9行,相应位置插入!important 语句。

这样做的目的是也把第一段文字的颜色设置为红色。

?不会了怎么办

第9行是否是输入这样的代码:

p{color:red!important;}
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / weixin_慕的地4485148
    p {        color: red;    }    p{        color:red!important;    }    p.first {        color: green;    }你这样写试一下

最赞回答 / 黑龙学习小组_组员
可以试试把p和{之间的空格删掉

最新回答 / OIer_Eternity
可以有空格,意思是一样的,只是它是通过代码验证的,所以格式错误也算错

最赞回答 / 星舟
我又想了下,大神们看我说的对不对,因为<span>是继承关系,所以他里面的权值为0.1,如果.first span不跟他定义,他会随着#a变为黄色,但定义过以后,他的权值为10+1>0.1,所以会变为蓝色,同理,#second不是继承关系,他只能按照important的定义,为红色,大神们看我理解的对不对。

最赞回答 / qq_慕慕0232610
删除p和{之间的空格,就通过了,奇奇怪怪

最赞回答 / 慕数据5757292
!important只是定义了p的颜色,而span的式样是继承了父容器P的red,但此时这个red的权重只有0.1,因为是继承过来的。代码中.first定义了span的颜色为pink,但此时权重为1,1>0.1,所有颜色是pink。

最新回答 / weixin_慕设计3319708
<p class="first">是first的类选择符,在css中将第一段设置为了绿色

已采纳回答 / 慕沐4207267
我觉的应该是这么一回事:不加空格代表的是p标签和类选择器.first交集,就是这两种标签同时存在同一个标签符号内的情况下后面的样式才生效,加上空格后就代表的是p标签的后代选择器中的类选择器.first对应的合集。所以加上空格后这一段代码对第一段文字不生效了。生效的只有第二段里面的“简单”,所以就出现你说的情况了。

最赞回答 / 一只小新
没有的

最赞回答 / 鹿小葵
中间加个空格就好了p .first则可以实现span的格式变化,且只能实现span的变化。如果是p.first中间没有空格,表示p与.first的交集,故而只能显示第一段的变化。

最新回答 / 慕码人8024790
纠正一下楼上的帅清,应该用英语输入,正确写法:!important
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言