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

我不是女神ヾ 2024-04-17 05:59 75阅读 0赞

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

1.  子代选择器：>号

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

1.  后代选择器：空格

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

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

html代码

只用父类选择器的css代码

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

只用父类选择器的浏览器显示效果：此时仅有子代被选择，后代的后代无边框没有被选择  
![20190825151615786.jpg][]  
只使用后代选择器的css代码

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

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

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

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

![在这里插入图片描述][20190825152521530.jpg]  
第二种：

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

![201908251525443.jpg][]  
按照代码顺序  
第一种先选择所有后代，再选择子代  
第二种先选择子代再选择所有后代  
可以产生不同的结果可以得知两个选择器可以相互覆盖，所以优先级相同

[20190825151615786.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6c8976f4a3574f84bdf35cbae872ab2e.jpg
[20190825151857801.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/363ce210f7bb49b79b771be82333009a.jpg
[20190825152521530.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/bc86bb3224c04710ac6dfd6a18802acd.jpg
[201908251525443.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/180b7a42deda46a2bcdd01f52325af4a.jpg