CSS3利用linth-child(n)实现隔几行设置元素

麦田2年前 (2020-05-15)工作笔记269

hugo主题ivy首页就是全部文章列表,如果文章过多,一眼看去会视觉疲劳。虽然可以设置分页,但是我忽然想:能不能设置每隔10个li就写个标记,比如不同的颜色或者分割线来减少视觉疲劳!


通过谷歌搜索找到答案,还是谷歌最好用!解决方法:


nth-child(n),n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素,不论元素的类型。


序号写法:


li:nth-child(3){background:orange;} /把第3个LI的背景设为橙色/


倍数写法:


li:nth-child(3n){background:orange;}/把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色/


倍数分组匹配:


li:nth-child(3n+1){background:orange;}/匹配第1、第4、第7、…,每3个为一组的第1个LI/


li:nth-child(3n+5){background:orange;}/匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI/


li:nth-child(5n-1){background:orange;}/匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI/


其他写法:


ul li:first-child{margin-left:0;}  /第一个/


ul li:last-child{margin-left:0;}   /最后一个/


ul li:nth-child(5){margin-left:0;} /指定第几个/


ul li:nth-child(odd){background:orange;}   /基数/


ul li:nth-child(even){background:orange;} /偶数/


隔三行设置颜色:


$(“tr:nth-child(3n)").css(“background”,"#eee”);


隔两行换一个颜色:


$(“tr:nth-child(2n)").css(“background”,"#eee”);


或者你是要每隔三行的第二行和第三行设置颜色


$(“tr:nth-child(3n)").css(“background”,"#eee”);


$(“tr:nth-child(3n+2)").css(“background”,"#ccc”);

相关文章

网页底部按钮遮挡内容怎么办CSS

某网站的底部有【立即提交订单】的按钮,固定在底部,使用了position: fixed,所以会遮挡网页内容,解决方法:增加同高度占位元素在按钮内容之前加入以下代码:<div style=&quo...

Markdown写静态网站指南

使用Markdown写静态网站需要注意:1、模板格式已经写好,只需要替换相应内容,不要打乱格式;2、理解标题、标签、关键词的含义;标题title:就是本文的主题内容的一句话总结,全文是围绕这个主题开展...

CSS字体大小单位介绍和转换对照表

css字体大小单位,常见的有px、em、rem,这三个的区别是:px是固定的像素,设置后无法为适应页面大小而改变,但实际上这是我经常使用的字体单位大小,设置后页面显示正常,不存在在手机中字体过小的问题...

HTML引入CSS的方法和示例

HTML和CSS是不同的两种语言,但是它们对网页同时产生作用。网页(WebPage)= 内容(html) + 表现(css) + 行为(javascript),因此需要把CSS引入HTML一起使用,让...

DIVCSS的class和id的区别

网页中,常见的是div class,有时也有div id,这两者有什么区别呢?<div class="wrap">,对应的是.wrap<div id="...

CDN详解和自建CDN的方法

什么是CDNCDN,全称是Content Delivery Network,即内容分发网络。CDN的关键技术是内容存储和分发技术,就是把你的网站分发到很多机房中,让访问速度更快,让网站更安全!比如,湖...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。