CSS中+ , > , ~ 傻傻分不清

+选择器(相邻兄弟选择器)

作用于紧跟其后的兄弟节点。

注意事项:
1.有共同的父级
2.必须紧跟其后,中间隔个啥都不行。
3.只作用于紧跟其后的元素

点击查看只作用于相邻的p,后面的p无效
点击查看中间隔了个元素,+选择器无效

~选择器

相对+比较大气,作用于后面全部的元素,中间隔啥都行。

注意事项:
1.要有共同的父级

点击查看大气的~,作用的范围广,限制少

>选择器(后代选择器)

注意事项:只作用于第一层后代

点击查看只作用于第一层后代

    原文作者:梁志芳
    原文地址: https://segmentfault.com/a/1190000014281205
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞