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

最新推荐文章于 2024-03-05 10:46:09 发布

weixin_43343144

最新推荐文章于 2024-03-05 10:46:09 发布

阅读量746

点赞数

本文链接：https://blog.csdn.net/weixin_43343144/article/details/119305016

版权

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

参考以下案例更直观

<!DOCTYPE html>
<html lang="en-US" prefix="og: https://ogp.me/ns#">


<!--

	nth-child总结：
		1、这里是div.detail-txt的子元素【>】 而不是全部后代元素
		2、这里是div:nth-child全部兄弟元素排序【但是div.detail-txt全部子元素的顺序是不会变的】
		3、为此这里div:nth-child选中的是1、3、5、7、9
-->
<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>

weixin_43343144

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的【nth-child】用法总结

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child参考以下案例更直观<!DOCTYPE html><html lang="en-US" prefix="og: https://ogp.me/ns#"><!-- nth-child总结： 1、这里是div.detail-txt的子元素【>】而不是全部后代元素 2、这里是div:nth-child全部兄弟元素排序【但是div
复制链接

扫一扫