今天做一个页面，无意中看到这个nth-of-type感觉挺方便的，之前单双行有的有横线，有的无横线一般在html中单独再写border-right：none等之类的。现在发现这个好东西赶紧记录下来。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。
.uninstall_form .uninstall_list_checkbox:nth-of-type(odd){border-right:1px solid #e6e6e6}<form onsubmit="return check()" action="" method="post" name="post_unintall" id="post_unintall"> <div class="uninstall_list"> <input type="checkbox" id="uninstall_list1" name="my_check[]" value="1"> <label class="uninstall_list_checkbox">我想下某个软件结果下载了安智市场</label> </div> <div class="uninstall_list"> <input type="checkbox" id="uninstall_list1" name="my_check[]" value="2"> <label class="uninstall_list_checkbox">手机出问题，卸载了重装试试</label> </div> <div class="uninstall_list"> <input type="checkbox" id="uninstall_list2" name="my_check[]" value="3"> <label class="uninstall_list_checkbox">软件不全，好多软件找不到</label> </div> .....</form>odd奇数行右面有一条线 even偶数行没有，还可以用2n+1表示奇数，2n表示偶数，3n+1表示每个三个显示。
类似的也有
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
立即学习“前端免费学习笔记（深入）”；
有一个css样式我感觉也很有用 记录下来
background-clip: border-box|padding-box|content-box;
background-clip 属性规定背景的绘制区域。
border-box是背景被裁剪到边框盒。
效果这样的
padding-box背景被裁剪到内边距框。
效果这样的：
content-box是背景被裁剪到内容框。
效果是这样：
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
931
