看下面一个例子:
<div class="tpaper-detail "> <ul> <li> <div> <h3>1. 依次填入句中横线上的词语,恰当的一组是( ):在语文学习中,字要____________地写,话要____________地说,课文要____________地读,练习要_______ _____地做,作文要认认真真地完成 。(单选,2分) </h3> <p class="blue"> <i><label class="theme-checkbox-radio"><input checked="" type="radio" name="ccc"><span></span></label></i> <span>A.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> <p class="blue"> <i><label class="theme-checkbox-radio"><input checked="" type="radio" name="ccc"><span></span></label></i> <span>B.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> <p class="blue"> <i><label class="theme-checkbox-radio"><input checked="" type="radio" name="ccc"><span></span></label></i> <span>C.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> <p class="blue"> <i><label class="theme-checkbox-radio"><input checked="" type="radio" name="ccc"><span></span></label></i> <span>D.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> </div> </li> <li> <div> <h3>2. 指出下列各句中修辞方法不同的一句(多选,2分) </h3> <p class="blue"> <i><label class="theme-checkbox"><input checked="" type="checkbox" name="ddd"><span></span></label></i> <span>A.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> <p class="blue"> <i><label class="theme-checkbox"><input type="checkbox" name="ddd"><span></span></label></i> <span>B.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> <p class="blue"> <i><label class="theme-checkbox"><input type="checkbox" name="ddd"><span></span></label></i> <span>C.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> <p class="blue"> <i><label class="theme-checkbox"><input type="checkbox" name="ddd"><span></span></label></i> <span>D.</span><span>仔仔细细 清清楚楚 踏踏实实 规规矩矩</span> </p> </div> </li> <li> <div> <h3>3. 指出下列各句中修辞方法不同的一句(判断题,2分) </h3> <p class="blue"> <i><label class="theme-checkbox-radio"><input checked="" type="radio" name="fff"><span></span></label></i> <span>A.</span><span>对</span> </p> <p class="blue"> <i><label class="theme-checkbox-radio"><input checked="" type="radio" name="fff"><span></span></label></i> <span>B.</span><span>错</span> </p> </div> </li> <li> <div> <h3>4. 您希望主办方为您提供哪方面的培训资源? (简答题,10分) </h3> <p> <textarea name="" id="" cols="30" rows="10" style=" padding: 10px 0 0 15px;"></textarea></p> </div> </li> </ul> <div class="fabu_btn"> <div class="clearfix txt-center"> <a href="">提交</a> <a href="" class="margin-left-20">进入考试</a> </div> </div> </div>
看下面的代码
$('.tpaper-detail>ul>li>p span:nth-child(3)')//选中表示具体选项内容的span标签 上面的代码可以选中,但是当我在label标签内再加上一个节点时, 例如:<label class="theme-checkbox-radio"> <script>.....</script> <input checked="" type="radio" name="fff"> <span></span> </label>
lable中的span也会被选中,
于是我就百度了,后来终于对ele:nth-child(n)有了新的认识,lable中的所有的子元素有3个,span正好是第三个子元素;总结:
这个伪类选择器中的ele必须满足2个条件:1)是一个ele代表的元素,比如span:nth-childe(3)首先得是一个span标签2)是父元素的第n个直接子元素,注意这里的父元素,是从ele这个元素开始往上寻找;span作为第三个子元素的情况分别是lable中的span(第三个直接子元素),和p中第二个span(第三个直接子元素)