网页|Zepto框架层次选择器

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

欢迎加入团队圈子！与作者面对面！直接点击！

1.引言

说到选择器，大家可能会想到层叠样式表。在css中，选择器可以获取元素，为其添加css样式；但zepto框架与css选择器相比，它更加强大，因为zepto选择器为元素添加的是行为，行为的添加使得页面的交互更加丰富多彩。今天就来介绍一下zepto的常用选择器——层次选择器、属性选择器。

2.层次选择器详解

层次选择器是通过DOM元素之间的层次关系来获取元素的。zepto层次选择器与css的相同之处都是更具元素与其父元素、子元素、兄弟元素之间的关系构成的选择器，但使用zepto层次选择器为最佳选择。

图2.1 层次选择器说明

1）后代选择器

我是子孙元素

图2.1.1 后代选择器效果

后代选择器选择的是元素的后代。这里我们选择了id为parent的元素里的所有id为child（后代）元素背景色变为pink的同时，又选择了id为parent的元素里的所有p（后代）元素字体颜色变为yellow。在这里可以看出后代选择器顾名思义，只要是后代都可以选择。

2）子选择器

我是子孙元素

图2.1.2 子选择器效果

子选择器选择的是元素的子代。这里我们选择了id为parent的元素里的所有id为child（子）元素背景色变为pink的同时，又选择了id为parent的元素里的所有p（子）元素字体颜色变为yellow。但在实现效果中仅仅背景变成pink了但字体颜色仍是默认的黑色，即找不到id为parent的元素里的p（子）元素，因为在上面的代码中p元素属于child元素的子元素，故找不到元素。在这里可以看出子代选择器顾名思义，只能干涉子元素而对子元素以外的后代元素确实无能为力了。

3）相邻元素选择器

p1       d1       p2       p3       d2       p4

图2.1.3 相邻元素选择器效果

相邻元素选择器选择的是元素之后的相邻对应元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到只有p2变成了粉色。在这里可以看出相邻元素选择器顾名思义，其选择的元素只能是后面紧邻的元素。

4）同辈元素选择器

p1       d1       p2       p3       d2       p4

图2.1.4 同辈元素选择器效果

同辈元素选择器选择的是元素之后的同辈元素。这里我们选择了id为d1的元素之后的p元素的背景变成pink，在实现的效果中可以看到除p1外的所有p元素背景都变成了变成了pink。在这里可以看出同辈元素选择器的选择顾名思义，其选择的元素是元素之后所有同辈的元素。

3.总结

zepto框架有四大常用选择器，基本选择器、层次选择器、属性选择器和基本过滤选择器。在这里笔者只介绍了其中的一种，但也可以看出层次选择器十分有趣，同时相较于CSS层次选择器来说，它通过元素之间的层次关系来获取元素的方法也更加实用。如果读了这篇文章你感兴趣的话，可以继续了解zepto选择器和zepto框架哦。

END

编  辑   |   王楠岚

责  编   |   杨金月

 where2go 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！