1. 程式人生 > >nth-child的正確理解

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(第三個直接子元素)