为了账号安全,请及时绑定邮箱和手机立即绑定

想请教一下,不是标签的权值小于类选择器吗,为什么下边这段代码运行结果是<span>中的粉色覆盖了.first中的绿色,求大神解答

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>特殊性</title>

<style type="text/css">

p{color:red;}

.first{color:green;}/*因为权值高显示为绿色*/


span{color:pink;}/*设置为粉色*/



</style>

</head>

<body>

    <h1>勇气</h1>

    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

    <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

</body>

</html>


正在回答

4 回答

first是作用于P标签的,因其标签下的所有子元素有继承特性,所以span也会继承绿色(继承的权值为0.1)
但是后面又重新设置了span的颜色属性为粉色(标签权值为1)
所以当权值为0.1的绿色与权值为1的粉色对比,浏览器肯定会认定权值高的粉色属性,所以最终显示效果也是粉色。

4 回复 有任何疑惑可以回复我~

前两个都是设置p元素的,span会继承绿色,后面又设置span颜色,继承权重最低,所以显示粉色

1 回复 有任何疑惑可以回复我~

first是这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,例如span,这是继承,继承的权值最低,所以span显示粉色。


2 回复 有任何疑惑可以回复我~

我也是小白,说下个人理解,类选择器作用对象是p,标签作用对象是span,所以会变成粉色,如果他俩同时作用span才需要比较权值吧?



0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

想请教一下,不是标签的权值小于类选择器吗,为什么下边这段代码运行结果是<span>中的粉色覆盖了.first中的绿色,求大神解答

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信