一，同级选择
prev + next
前后两个元素是属于同一个层级的，不可以越级
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
</html>
<script>
$(function(){
$("label + input").css({
"background-color" : "red"
})
})
</script> 只会选中与该label 同一层级的后面的input元素
- 效果
~ 和 + 操作符的效果是一样的，只能选择同级后面的元素
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<form>
<input name="hello" /><br/>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
</html>
<script>
$(function(){
$("label ~ input").css({
"background-color" : "red"
})
})
</script>
效果是这样的，label前面的元素是没有被选中的