css:nth-of-type()选择器用法_html/css_WEB-ITnose
程序员文章站
2022-03-25 16:30:42
...
今天做一个页面,无意中看到这个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}
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/css_WEB-ITnose
-
IFrame 框架的用法简介_html/css_WEB-ITnose
-
CSS 有关margin padding_html/css_WEB-ITnose
-
懒人的诉求:有没有支持CSS文件的可视化的页面开发工具?_html/css_WEB-ITnose
-
手机端分类页面的效果图实现_html/css_WEB-ITnose
-
Codeforces Round #281 (Div. 2)_html/css_WEB-ITnose
-
能否实现对特定字符设置样式?_html/css_WEB-ITnose
-
HTML与CSS布局技巧总结_html/css_WEB-ITnose
-
CSS实现背景透明,文字不透明(各浏览器兼容)_html/css_WEB-ITnose
-
如何让整个div实现超链接(得用标签)_html/css_WEB-ITnose