css:nth-of-type()选择器用法_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:37:33
原创
1721 人浏览过

今天做一个页面,无意中看到这个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是背景被裁剪到内容框。

效果是这样:

 

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板