<div class="box">
<p>1</p>
<p>1</p>
<p id="num">1</p>
<div><p>2</p></div>
<p><span>11</span></p>
<p>temp</p>
<div></div>
<div><b></b></div>
<button id="btn">点击 </button>
</div>
<script>
//父级元素下匹配所有子元素 $('父级元素 > 子级元素')
//$('.box > p').css('color','red'); //祖先元素下匹配所有后代元素 $('祖先元素 > 后代元素')
//$('.box p').css('fontSize','26px'); //匹配紧跟在p元素后面的next元素 $('p + next')两个必须是同级元素
//$('p+input').css('background','red'); //匹配p元素后面所有siblings同级元素 $('p ~ input')
//$('p~input').css('background','blue');
//prev() 匹配同级元素紧邻的前面的元素
//$('#num').prev(); // :first 匹配第一个元素
//$('.box p:first').css('color','green'); // :last 匹配最后一个元素
//$('.box p:last').css({'color':'orange','fontSize':'50px'}); //比较
//$('p:gt(1)').css('color','green'); //匹配大于x的元素,从0开始
//$('p:lt(1)').css('color','green'); //匹配小于x的元素,从0开始
//$('p:eq(1)').css('color','green'); //匹配等于x的元素,从0开始
//奇偶数
//$('p:odd').css('color','red'); //匹配奇数行的元素,从0开始
//$('p:even').css('color','red'); //匹配偶数行的元素,从0开始
//非
//$('p:not(#num)').css('background','red'); //匹配除了id为num的所有p标签
//内容选择器
//$('p:contains(temp)').css('background','pink'); //匹配包含指定文本的元素
//$('p:has(span)').css('color','green'); //匹配包含特定选择器的元素
//$('div:empty').css('background','red');//匹配不含有内容的空元素，什么都没有
//$('div:parent').css('background','green'); //匹配含有了元素或者文本的元素 和:empty相反
//表单选择器
// 语法：
// $(':enabled')所有激活的input元素（可以使用的input元素）
// $(':disabled')所有禁用的input元素（不可以使用的input元素）
// $(':selected')所有被选取的元素，针对于select元素
// $(':checked')所有被选中的input元素
</script>
