nth-child的正确理解

来源：互联网发布：淘宝外国模特编辑：程序博客网时间：2024/06/10 02:48

看下面一个例子：

<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（第三个直接子元素）

1 0