nth-child的正确理解

看下面一个例子:
<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(第三个直接子元素)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值