CSS特殊性_慕课猿问

CSS特殊性

CSS特殊性这一节答案给的是p span{color:purple;}，不懂这是什么格式，以前的不是都写成.first>span{color:purple;}这样的格式吗，实现的效果一样，请问两者有啥区别？

查看完整描述

3 回答

已采纳

Perona

TA贡献355条经验获得超403个赞

空格代表后代选择器，>代表子代选择器。

后代选择器匹配所有的后代元素，包含子代。

子代选择器只匹配第一代元素。

相关知识点：子选择器

包含(后代)选择器

反对回复 2015-12-30

qq_漂流帝国_0
!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;}/*设置为粉色*/ .first>span{color:purple;}/*设置权值更大的10*/ </style> </head> <body> <h1>勇气</h1> <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p> <p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p> </body> </html> 答案给出的是p>span{color:purple;}或p span{color:purple;} 我写出的是.first>span{color:purple;}或.first span{color:purple;} 我是问这两者的区别，因为在子选择器和后代选择器那一节中的格式是.first>span{color:purple;}或.first span{color:purple;}这种？你没听懂我问的问题

回复 2015-12-31
Perona
p>span{color:purple;}或p span{color:purple;}这2个父元素都是标签选择器。.first>span{color:purple;}或.first span{color:purple;}这2个父元素都是类选择器。区别就是：类选择器比标签选择器权值高，类选择器可以匹配不同的标签元素，而标签选择器匹配的只有该元素。

回复 2015-12-31
qq_漂流帝国_0
多谢！

回复 2015-12-31

荼酒

TA贡献133条经验获得超96个赞

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            background-color: #cccccc;
            width: 150px;
            height: 150px;
        }
        .div1>div{
            background-color: #0050ef;
            height: 50px;
            width: 50px;
        }
        .div1 div{
            background-color: #0050ef;
            height: 50px;
            width: 50px;
        }
    </style>

</head>
<body>
        <div>
            <div>
                <p>
                    <p>
                        <div>

                        </div>
                    </p>
                </p>
            </div>
        </div>
</body>
</html>

经过测试，

空格会指向改选择器下的所有匹配元素

>只会指向一级不会指向所有层级

反对回复 2015-12-31

echo_kinchao

TA贡献600条经验获得超86个赞

这是一种选择器的写法

反对回复 2015-12-30

qq_漂流帝国_0
答案给出的是p>span{color:purple;}或p span{color:purple;} 我写出的是.first>span{color:purple;}或.first span{color:purple;} 我是问这两者的区别，因为在子选择器和后代选择器那一节中的格式是.first>span{color:purple;}或.first span{color:purple;}这种，我没见过p>span{color:purple;}或p span{color:purple;}这种格式。我想问的是这两者的区别？

回复 2015-12-31

CSS特殊性

CSS特殊性

3 回答

相关问题推荐

添加回答

热搜

最近搜索清空

CSS​特殊性

CSS​特殊性

3 回答

相关问题推荐

添加回答

CSS特殊性

CSS特殊性