1. html 结构

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>nth Child</title>

</head>

<body>

  <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

    <li>Item 5</li>

    <li>Item 6</li>

    <li>Item 7</li>

    <li>Item 8</li>

    <li>Item 9</li>

    <li>Item 10</li>

    <li>Item 11</li>

    <li>Item 12</li>

    <li>Item 13</li>

    <li>Item 14</li>

    <li>Item 15</li>

    <li>Item 16</li>

    <li>Item 17</li>

    <li>Item 18</li>

    <li>Item 19</li>

    <li>Item 20</li>

  </ul>

</body>

</html>

2. css 样式

li {

      padding: 0.25rem;

      margin: 0.25rem;

      list-style: none;

    }

    /* 选择父元素的第一个子元素 */

    li:first-child {

      background-color: red;

    }

    /* 选择父元素的最后一个子元素 */

    li:last-child {

      background-color: red;

    }

    /* 选择第三个 */

    li:nth-child(3) {

      background-color: blueviolet !important;

    }

    /* 选择3的倍数 */

    li:nth-child(3n) {

      background-color: olive;

    }

    /* 从7开始,按3的倍数进行选择 */

    li:nth-child(3n+7) {

      background-color: aqua;

    }

    li:nth-child(odd) {

      background-color: violet;

    }

    li:nth-child(even) {

      background-color: black;

    }

新的 css 子选择器的更多相关文章

  1. CSS 子选择器(六)

    一.子选择器 子选择器中前后部分之间用一个大于号隔开,前后两部分选择符在结构上属于父子关系. 子选择器是根据左侧选择符指定的父元素,然后在该父元素下寻找匹配右侧选择符的子元素. 二.简单例子 < ...

  2. CSS子选择器与后代选择器的区别

    p > span{ color:blue; } <p> 嵌套使用<span>css好牛逼!</span><span>是啊<b>也影响孙 ...

  3. css子选择器 :frist-child :nth-child(n) :nth-of-type(n) ::select选择器

    记录一下前一段时间使用.学习的几种选择器. 1. :frist-child 选择器n 比如<ul><li></li> <li></li> & ...

  4. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  5. CSS系列(8) CSS后代选择器和子选择器详解

    一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...

  6. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  9. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

随机推荐

  1. 一个简单的模拟实例说明Task及其调度问题

    Task对于.NET的重要性毋庸置疑.通过最近的一些面试经历,发现很多人对与Task及其调度机制,以及线程和线程池之间的关系并没有清晰的认识.本文采用最简单的方式模拟了Task的实现,旨在说明Task ...

  2. Zookeeper 文件系统 ?

    Zookeeper 提供一个多层级的节点命名空间(节点称为 znode).与文件系统不 同的是,这些节点都可以设置关联的数据,而文件系统中只有文件节点可以存放 数据而目录节点不行. Zookeeper ...

  3. MySQL 里记录货币用什么字段类型?

    NUMERIC 和 DECIMAL 类型被 MySQL 实现为同样的类型,这在 SQL92 标准允 许.他们被用于保存值,该值的准确精度是极其重要的值,例如与金钱有关的数 据.当声明一个类是这些类型之 ...

  4. 学习Cobbler（一）

    一. http://cobbler.github.io/ Cobbler is a Linux installation server that allows for rapid setup of n ...

  5. 云计算：Ubuntu下Vue+Springboot前后端分离项目部署（多节点）

    一.机器准备 首先准备三台机器: 我是一台WINDOWS系统主机,在WINDOWS里的 VMware 中安装两台Ubuntu系统虚拟机 如果你的虚拟机只有 CentOS,可以参考这篇文章:https: ...

  6. 自启动Servlet

    自启动servlet也叫自动实例化servlet 特点 该Servlet的实例化过程不依赖于请求,而依赖于容器的启动,当Tomcat启动时就会实例化该Servlet 普通Servlet是在浏览器第一次 ...

  7. html5与css交互 API 《一》classList

    用过jquery的朋友都知道,jquery提供的方法中(3个)可以很方便的为指定的节点添加.删除类选择器,即addClass.removeClass.toggleClass.具体的用法我这里就不谈了, ...

  8. APICloud首款全功能集成开发工具重磅发布，彰显云端一体理念

    近日,APICloud重磅推出首款云端一体的全功能集成开发工具--APICloud Studio 2.为了更深入了解这款开发工具的特性及优势,APICloud CTO 邹达针对几个核心问题做出了解答. ...

  9. js压缩图片到2m以下

    用的canvas.这个问题测试妹子反馈了好几次bug,解决了好多次,虽然用了比较僵硬的办法,但总算最终解决了. 因为php的同事说,页面上的图片要直接调用七牛的接口上传到七牛,所以后端那边不能处理,必 ...

  10. html dom 转化成图片踩坑记（canvas toDataURL）

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...