                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

第二段字体颜色

p span{color:purple;}

在加入p span{color:purple;}权重为2，p{color:red;}权重为1，为什么第二段字体颜色还是red？

frsec

2016-12-13

源自：初识HTML(5)+CSS(3) 9-3

关注问题我要回答

1086

操作

收起

4 回答

慕的地8130322 回答被采纳 +3 积分
2016-12-19

p span{ color:purple} 和p>span{color:purple}是两个不同的意思，但是他们的权值都是2。

p span {}表示后代选择器而 p>span {}表示子代选择器

在这里的练习时显示的效果是一样的，但是意思有所不同

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

收起回答

frsec 提问者

非常感谢！

2016-12-19 回复有任何疑惑可以回复我~

小刚0123456
2016-12-13

p span{color:purple;} p span是p>span的缩写，只是对p中的子标签span起作用，p{color:red;} p标签的css样式才能对p起作用，所以显示的只是red，你添加一个span{color:red;}试试，肯定span中的文字显示成purple色,red不起作用，符合权重的规律。

我测试了是对的：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>制作我的第一个网页</title>
        <style>
            p span{color:purple;}
            span{color:red;}
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>sdfsadfasfasfa<span>sfasasa</span>fadfasfaf</p>
        <p>sdfasdfasdfadf</p>
    </body>
</html>

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

收起回答

frsec 提问者

。。。是说第二段字体的颜色

2016-12-13 回复有任何疑惑可以回复我~

小刚0123456 回复 frsec 提问者

我知道，原理是一样的。

2016-12-14 回复有任何疑惑可以回复我~