css3基础 :nth-child(3n+1) 简单示例

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <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视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8439680.html

时间: 2024-10-08 14:29:49

css3基础 :nth-child(3n+1) 简单示例的相关文章

[JavaWeb基础] 019.Velocity 模板引擎简单示例

1.什么是Velocity 一种J2EE的前端模版技术,和JSP,Freemarker差不多,都是用来展示网页内容的.和JSP不同的是velocity只能显示Action中的数据,不能处理数据.不能写java代码,但是可以使用Velocity标记.也就是说把显示代码和后端的JAVA代码分离开来,降低程序的耦合性 2.需要引入哪些Jar包 velocity-1.5.jar,velocity-1.6.2.jar,velocity-tools-2.0.jar,velocity-tools-generi

css基础 选择器 id 设置样式 简单示例

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JavaSE8基础 继承一个抽象类的简单示例

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0)        代码: abstract class Person { //姓名 private String name; //年龄 private int age; public void setName(String name) { this.name = name; } public String getName() { re

JavaSE8基础 extends 子类继承父类 简单示例

os :windows7 x64    jdk:jdk-8u131-windows-x64    ide:Eclipse Oxygen Release (4.7.0) 代码: /* * 多个类中存在相同的属性和行为时, * 这些重复的属性和行为,就可以归纳到一个单独的类中. * 这个单独的类是 父类.基类.超类. */ //基类 class Person { public void sayHello() { System.out.println("hello world"); } pu

JavaWeb基础 jsp+servlet分工合作的简单示例

礼悟:    好好学习合思考,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼强身心,诚劝且行且珍惜. javaEE:7                  javaSE:1.8          JSTL:1.2.2        server:tomcat 8.5    browser:Chrome/Firefox             os:windows7 x64            ide:MyEclipse 2017 项目

关于Ajax实现的简单示例

一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>使用Ajax异步加载数据</title> <script type = "text/javasc

SQL左连接、右连接和内连接的简单示例

left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录: right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: inner join(等值连接) 只返回两个表中联结字段相等的行:举例如下: -------------------------------------------- 表A记录如下: aID aNum 1 a20050111 2 a20050112 3 a20050113 4 a20050114 5 a20050115 表B记录

CSS3 基础知识

CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平.垂直.模糊.扩展)             box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影)    1.3 边框图像 border-image2.背景    2.1 background-size background-size:

电子书 html5与css3基础教程第8版.pdf

内容简介 <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分析了网页制作的方方面面.全新第8版不仅介绍了文本.图像.链接.列表.表格.表单等网页元素,还介绍了如何为网页设计布局.添加动态效果等,另外还涉及调试和发布. <HTML5与CSS3基础教程(第8版)>提供了一个强大的配套网站,上面列出了书中的完整代码示例以及更多优秀实例及进阶参考资料,以