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. 造成panic_oom问题的测试代码

    写一个内核模块,来构造内核模块出现panic oom,主要采用vmalloc函数: #include <linux/module.h> #include <linux/mm.h> ...

  2. C# XML基础入门（XML文件内容增删改查清）

    前言: 最近对接了一个第三方的项目,该项目的数据传输格式是XML.由于工作多年只有之前在医疗行业的时候有接触过少量数据格式是XML的接口,之后就几乎没有接触过了.因此对于XML这块自己感觉还是有很多盲 ...

  3. HMS Core 机器学习服务6.4.0版本更新啦，文本翻译功能增加10种小语种语言类型！

    近日,HMS Core机器学习服务(ML Kit)文本翻译功能在6.4.0版本更新中增加了10种小语种语言类型,分别是马其他语.马其顿.冰岛.乌尔都语.波斯尼亚语.乌克兰语.加泰罗尼亚语.斯洛文尼亚语 ...

  4. Delete、truncate、drop都是删除语句，它们有什么分别？

    delete 属于DML语句,删除数据,保留表结构,需要commit,可以回滚,如果数据量大,很慢. truncate 属于DDL语句,删除所有数据,保留表结构,自动commit,不可以回滚,一次全部 ...

  5. volatile 有什么用？能否用一句话说明下 volatile 的应用场景？

    volatile 保证内存可见性和禁止指令重排. volatile 用于多线程环境下的单次操作(单次读或者单次写).

  6. Integer与int的区别？

    int是java提供的8种原始数据类型之一.Java为每个原始类型提供了封装类,Integer是java为int提供的封装类.int的默认值为0,而Integer的默认值为null,即Integer可 ...

  7. 为什么说 Mybatis 是半自动 ORM 映射工具？它与全自动 的区别在哪里？

    Hibernate 属于全自动 ORM 映射工具,使用 Hibernate 查询关联对象或者关联 集合对象时,可以根据对象关系模型直接获取,所以它是全自动的.而 Mybatis 在查询关联对象或关联集 ...

  8. mybatis插件机制原理

    mybatis插件机制及分页插件原理 参考链接:mybatis插件机制及分页插件原理 如何编写一个自定义mybatis插件 参考链接:mybatis 自定义插件的使用

  9. 12 Web Development Trends That Will Dominate 2022

    12 Web Development Trends That Will Dominate 2022 (mindinventory.com) Progressive Web Apps (PWAs) An ...

  10. 小程序完整对接 pingpp支付

    小程序完整对接 pingpp支付 有几个先要条件: 小程序需要企业认证且开通支付功能,个人认证是无法使用支付功能的(小程序微信支付官网) pingpp 本身接入的企业服务器(即商户服务器)并不强制要求 ...