问答详情
源自:9-3 权值计算-特殊性

CSS选择器的权重与优先规则 如果像我这样写为什么显示的都是红色而不是粉红色,根据分析p语句时span继承为0.1 后面一句为span标签为1,应该显示粉红色才对,求解

<!DOCTYPE HTML>

<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;}/*设置为粉色*/


/*p span{color:purple;}*/

</style>

</head>

<body>

    <h1>勇气</h1>

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

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

</body>

</html>


提问者:慕九州7538876 2016-10-10 11:47

个回答

  • 氵莳莪谛玛奇朵丿3850043
    2016-10-10 12:01:17
    已采纳

    /*     */这个中间放的是文字内容或者是你需要注意的地方,不会显示出来,但是你把.first{color:green;}和p span{color:purple;}放进去就不会显示出来成为了提示效果,这样是不对的,所以应该去除这2处的/*  */      这是你的错误所在

    关于你提到的问题,胆小如鼠因为继承应该是绿色,就是把span{color:pink;}删除后的结果;这时候胆小如鼠的权值就不是.first的10,而是继承的0.1。然后添加上span{color:pink;},因为span的权值为1,比继承的0.1大,所以显示为粉色。这是继承的问题,好好看看继承那节~

  • 尽信书
    2016-10-10 12:10:18

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

    这个地方出了问题,外围的注释‘*/’不知道什么原因并没起到作用,就把你的span{color:pink;}语句注释掉了;

    把上边那行删去就可以了,你试试。

  • heyuuu913
    2016-10-10 12:06:28

    因为span继承了p ,所以span的权值为0.1,而p为1.

    所以显示红色。

  • 慕工程9174562
    2016-10-10 12:03:25

    你的提问已经回答了你的问题了呀!因为span是p的子元素,所以它只有一个继承权值,也就是0.1!不会再有第二个权值了.

  • 黑白灰菌
    2016-10-10 12:03:03

    http://img.mukewang.com/57fb12c50001178813540190.jpg

    我这里显示“胆小如鼠”是粉红色的,没有问题