css3基础 :nth-child(odd奇/even偶) 简单示例

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


               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">
        /* CSS3的内容,需要注意兼容性 */

        /* odd:奇数 */
        li:nth-child(odd){
            color:red;
        }

        /* even:偶数 */
        li:nth-child(even){
            color:yellow;
        }

    </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/8439674.html

时间: 2024-10-08 02:22:39

css3基础 :nth-child(odd奇/even偶) 简单示例的相关文章

css基础 font-family 设置字体与CSS Unicode 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 浮动元素不占空间 的简单示例

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ 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)        代码: //接口 interface PersonTrain{ //只要函数的声明,不要具体实现 public abstract void writeBook(); } interface JavaerTrain{ public abstract void repairComputer(); } //抽线类实现一个接

Bootstrap3基础 form-horizontal 表单元素横向布局 简单示例

? 内容 参数 ??OS ??Windows 10 x64 ??browser ??Firefox 65.0.2 ??framework?? ??Bootstrap 3.3.7 ??editor ??Visual Studio Code 1.32.1?? ??typesetting ??Markdown ? code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

《html5与css3基础教程》(第8版)个人笔记

<html5与css3基础教程(第8版)个人笔记 四至六章 small 行内 短语版权符号:&copy 可任意嵌套,html和html5表示含义不一样 strong 重要 em 强调 html5中 b i figure:图figcaption可以用来添加署名? blockquote中的cite:提供引述文本的位置 很多开发人员避免使用q,而是手动添加引号或字符实体datetime可以用于在web应用之间同步日期和时间 YYYY-M-DDThh:mm:ss或hh:mm.sssUTC全球标准时间

《HTML5和CSS3基础教程》-笔记1

笔记(第一.二章整合) 1,HTML思想: 编写HTML是为网页内容打上能够描述它们的标签.并且,HTML元素描述的是:内容是什么,而非看起来是什么样. 即: a,HTML:用标签去说明网页内容的含义. b,语义化HTML:用最恰当的HTML元素去说明网页内容的含义. c,结构和表现完全分离.网页内容是什么,由HTML说明.网页内容什么样,由CSS说明. 另:为什么语义化很重要? 无障碍访问:搜索引擎优化(网页在搜索引擎的排名会靠前):更容易维护代码和添加样式. 2,网页构造块: 网页可保存为纯

htML+CSS3-》第3阶段:HTML5之CSS3基础与加强 中

HTML+CSS3->第3阶段:HTML5之CSS3基础与加强中 60前端开发基础视频-复合选择器之子元素选择器 子元素选择器,是让css选择器智能选择子辈的元素. 例如:h1>strong{color:red;} 解读为:选择器h1>strong可以解释为"选择作为h1元素子元素的所有strong元素". 61前端开发基础视频-属性选择器 属性选择器 <!DOCTYPE html> <html lang="zh"> <

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版)>提供了一个强大的配套网站,上面列出了书中的完整代码示例以及更多优秀实例及进阶参考资料,以