css3基础 :nth-child(3n+1) 简单示例
2018-02-10 20:33
288 查看
礼悟:
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
代码
效果
扩展
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。
ide:visual studio 2017
browser:Chrome
os:win7
browser:Chrome
os:win7
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="author" content="给最苦 https://www.cnblogs.com/jizuiku https://github.com/GratefulHeartCoder"/> <title></title> <style type="text/css"> /* n从0开始的[0,1,2,3,4,...] -> 1 4 7 */ li:nth-child(3n+1){ color:chocolate; } </style> </head> <body> <ul> <li>1、北斗第一阳明贪狼星君</li> <li>2、北斗第二阴精巨门星君</li> <li>3、北斗第三真人禄存星君</li> <li>4、北斗第四玄冥文曲星君</li> <li>5、北斗第五丹元廉贞星君</li> <li>6、北斗第六北极武曲星君</li> <li>7、北斗第七天关破军星君</li> </ul> </body> </html>
效果
扩展
CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。
相关文章推荐
- css3基础 :nth-last-child(3n) 简单示例
- css3基础 :nth-child(odd奇/even偶) 简单示例
- css3基础 ::before ::after 添加元素 简单示例
- css3基础 text-shadow 凹凸文字 简单示例
- css3基础 color:rgba 文字颜色半透明 简单示例
- css3基础 text-shadow 文字阴影 简单示例
- css3基础 rgba 背景半透明 简单示例
- css3基础 :target 目标伪类选择器 简单示例
- Object_c基础——面向对象的简单认识(含示例代码)
- CSS3绘制圆角矩形的简单示例
- Keepalive 基础概要及简单示例
- AngularJS基础 ng-srcset 指令简单示例
- 在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(基础知识以及简单示例)
- JavaSE8基础 构造代码块 简单示例
- CSS3选择器:nth-child和:nth-of-type之间的差异
- JavaSE8基础 具体类实现多个接口 简单示例
- Linux应用编程基础之多路复用:select和poll的简单使用示例
- css基础 !important 简单示例
- CSS3选择器:nth-child与:nth-of-type区别
- JavaSE8基础 Proxy 对接口进行动态代理 简单示例