nth-child的正確理解
阿新 • • 發佈:2019-02-17
看下面一個例子:
於是我就百度了,後來終於對ele:nth-child(n)有了新的認識,lable中的所有的子元素有3個,span正好是第三個子元素;總結:
這個偽類選擇器中的ele必須滿足2個條件:1)是一個ele代表的元素,比如span:nth-childe(3)首先得是一個span標籤2)是父元素的第n個直接子元素,注意這裡的父元素,是從ele這個元素開始往上尋找;span作為第三個子元素的情況分別是lable中的span(第三個直接子元素),和p中第二個span(第三個直接子元素)
<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(第三個直接子元素)