css3后代选择器和子代选择器的区别及优先级-蒲公英云

css3后代选择器和子代选择器的区别及优先级

子代选择器：>号

.father>div{

    border: 2px solid blue; 
                                       }`

后代选择器：空格

.father div{
```
    border: 2px solid pink;
}
```

子代选择器跟后代选择器的区别

html代码

<body>
    <div class="father">
      <div>
          儿子
          <div>
              孙子
          </div>
      </div>
    </div>
</body>

只用父类选择器的css代码

.father{
        width: 200px;
        height: 200px;
        border: 2px solid red;
    }
    .father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }

只用父类选择器的浏览器显示效果：此时仅有子代被选择，后代的后代无边框没有被选择

只使用后代选择器的css代码

.father{
        width: 200px;
        height: 200px;
        border: 2px solid red;
    }
    .father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }

仅使用后代选择器的情况：所有后代都被选择
在这里插入图片描述

两者优先级比较：若两个选择器同时存在
按代码先后顺序分为两种情况
第一种：

.father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }
    .father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }

在这里插入图片描述
第二种：

.father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }
    .father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }