关于权重问题

来源:8-10 给选择器分个组 - 分组选择器

Mr_Jp黎

2017-06-09 21:12

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分组选择符</title>
<style type="text/css">
h1,span{color:red;}
#second>span,.first{
    color:green;
}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很<span>简单</span>的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手.</p>
    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>

首先所有的h1、span标签的文字字体变红色。也就是“勇气”“胆小如鼠”“简单”变红色。

然后.first的所有文字和#second第一个span变成绿色。“简单”变成绿色,.first所有文字变绿色。

为什么“胆小如鼠”还是红色?

写回答 关注

6回答

  • 慕粉13294142755
    2017-06-09 21:38:45
    已采纳

    建议你看一下继承那里,<span>标签之所以会显示绿色,是因为继承,而继承的权重只有0.1,<span>{color:red;}

    的权重是1,1>0.1,所以显示的是红色。

  • 默默努力的友人A
    2017-06-23 10:09:11

    总感觉你是大神啊,懂的真多

    Mr_Jp黎

    一起学习,我可能比菜鸟好一点,还不是大神

    2017-06-27 21:51:38

    共 1 条回复 >

  • 慕娘2135767
    2017-06-09 22:30:36

    h1,span{color:red;}改成 h1 span{color:red;}就变绿了,可能是格式不同系统识别不了权重吧,我也是新手刚刚学

    Mr_Jp黎

    兄弟啊

    2017-06-14 09:59:00

    共 1 条回复 >

  • 大佳
    2017-06-09 21:43:03

    因为你在h1,span{color:red;}属于分别定义两者的熟悉,你可以尝试把“,”改成空格,就能够得到权重的理论的结果变绿色了。

    Mr_Jp黎

    答非所问啊兄弟,空格是表示后代,逗号是两者。我问的应该是权重问题或者继承

    2017-06-14 09:54:24

    共 1 条回复 >

  • 慕UI6309952
    2017-06-09 21:31:04

    你把.first移到#second前面.first,#second>span

    Mr_Jp黎

    .first,#second>span和#second>span,.first是一个意思啊兄弟,逗号是两者并不区分顺序吧

    2017-06-14 09:57:56

    共 1 条回复 >

  • 米发笑琪罗
    2017-06-09 21:29:29

    因为直接用标签做的选择器比其他东西做的选择器的权重都是要大的。

    Mr_Jp黎

    id大于class大于标签啊兄弟,important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

    2017-06-14 09:56:40

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1228526 学习 · 19002 问题

查看课程

相似问题