html中层次选择器,网页|Zepto框架层次选择器

1.引言

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

2.层次选择器详解

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

图2.1 层次选择器说明

1)后代选择器

zepto

我是子孙元素

//后代选择器 空格

$("#parent  #child").css("background-color","pink");

$("#parent p").css("color","yellow");

图2.1.1 后代选择器效果

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

2)子选择器

zepto

我是子孙元素

//子选择器

$("#parent>#child").css("background-color","pink");

$("#parent>p").css("color","yellow");//找不到元素

图2.1.2 子选择器效果

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

3)相邻元素选择器

zepto

p1

d1

p2

p3

d2

p4

//相邻元素选择器

$("#d1+p").css("background-color","pink");//d1后紧邻的p

图2.1.3 相邻元素选择器效果

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

4)同辈元素选择器

zepto

p1

d1

p2

p3

d2

p4

//同辈元素选择器

$("#d1~p").css("background-color","pink");

图2.1.4 同辈元素选择器效果

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

3.总结

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

编  辑   |   王楠岚

责  编   |   杨金月where2go 团队微信号：算法与编程之美