层次选择器:查找子元素,后代元素,兄弟元素的选择器
1、ancestor descendant
在给定的祖先元素下匹配所有的后代元素;
2、parent>child
在给定的父元素下面匹配所有的子元素;
3、pre+next
匹配所有紧接着在pre后的next元素;
4、prev~siblings
匹配prev元素之后的所有siblings元素
实例代码:
<!DOCTYPE html>
<html>
<head>
<title>层次选择器</title>
</head>
<body>
<!-- 层次选择器:查找子元素,后代元素,兄弟元素的选择器 -->
<!--
需求:
1、选中的ul下所有的span;
2、选中的ul下的所有子元素span;
3、选中class为box的下一个li;
4、选中ul下的class为box的元素后面的所有兄弟元素;
-->
<ul>
<li>AAA</li>
<li class="box">ccc</li>
<li title="hello"><span>BBB</span></li>
<li title="hello"><span>DDD</span></li>
<span>EEE</span>
</ul>
<script type="text/javascript" src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript">
//1、选中的ul下所有的span;
$('ul span').css('background','yellow');
// 2、选中的ul下的所有子元素span;
$('ul>span').css('background','yellow');
// 3、选中class为box的下一个li;
$('.box+li').css('background','yellow');
// 4、选中ul下的class为box的元素后面的所有兄弟元素;
$('ul .box~*').css('background','yellow');
</script>
</body>
</html>