css中的【nth-child】用法总结

喜欢ヅ旅行 2021-09-09 06:18 442阅读 0赞

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

**参考以下案例更直观**

<!DOCTYPE html>
    <html lang="en-US" prefix="og: https://ogp.me/ns#">
    
    
    
    <style> div.detail-txt > div:nth-child(1) { background: #00ff93; } div.detail-txt > div:nth-child(3) { background: #0b7ae3; } div.detail-txt > div:nth-child(5) { background: #0a9962; } div.detail-txt > div:nth-child(7) { background: #3c4f6f; } div.detail-txt > div:nth-child(9) { background: #3e84f9; } </style>
    
    <div class="detail-txt">
    	<div data-v-64489318="" class="form-control">
    		<textarea data-v-64489318="" name="" id="" cols="30" rows="10" placeholder="例：http://www.example.com/a.html"></textarea>
    		<p data-v-64489318="" class="tip gray">每次最多可提交20条链接，每行一条</p>  <p data-v-64489318="" class="tip gray">
    		仅支持页面对应链接的提交，不支持sitemap形式的文件提交</p> 
    	</div>
    	<h6 data-v-64489318="" class="siteH6">URL类型<span data-v-64489318="">*</span></h6>
    	<div data-v-64489318="" class="form-control">
    		<div data-v-64489318="" class="radio_item">
    			<input data-v-64489318="" type="radio" value="1"> <label data-v-64489318="" for="">pc</label></div>
    		<div data-v-64489318="" class="radio_item"><input data-v-64489318="" type="radio" value="2"> <label data-v-64489318="" for="">wap</label></div>
    	</div>
    	<h6 data-v-64489318="">详细说明</h6>
    	<div data-v-64489318="" class="form-control"><textarea data-v-64489318="" name="" id="" cols="30" rows="10" maxlength="200"></textarea>
    		<p data-v-64489318="" class="gray">限200字</p></div>
    	<h6 data-v-64489318="">邮箱<span data-v-64489318="">*</span></h6>
    	<div data-v-64489318="" class="form-control"><input data-v-64489318="" type="text"> <a data-v-64489318="" href="javascript: void(0)">这不是你常用的邮箱?</a>
    		<p data-v-64489318="" class="tip gray">为了及时给您反馈处理信息， 请填写联系方式</p></div>
    	<h6 data-v-64489318="">验证码<span data-v-64489318="">*</span></h6>
    	<div data-v-64489318="" class="form-control verification"><input data-v-64489318="" type="text"> <a data-v-64489318="" href="javascript: void(0)"><img data-v-64489318="" src="/api/user/generateVerifCode?timer=1627827513985" alt="验证码"></a> <a data-v-64489318="" href="javascript: void(0)">
    		看不清 换一张 </a>  </div>
    	<div data-v-64489318="" class="button-control"><a data-v-64489318="" href="javascript: void(0);" class="btn_add">提交</a>
    	</div>
    </div>
    
    </html>