新的 css 子选择器
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 子选择器的更多相关文章
- CSS 子选择器(六)
一.子选择器 子选择器中前后部分之间用一个大于号隔开,前后两部分选择符在结构上属于父子关系. 子选择器是根据左侧选择符指定的父元素,然后在该父元素下寻找匹配右侧选择符的子元素. 二.简单例子 < ...
- CSS子选择器与后代选择器的区别
p > span{ color:blue; } <p> 嵌套使用<span>css好牛逼!</span><span>是啊<b>也影响孙 ...
- css子选择器 :frist-child :nth-child(n) :nth-of-type(n) ::select选择器
记录一下前一段时间使用.学习的几种选择器. 1. :frist-child 选择器n 比如<ul><li></li> <li></li> & ...
- CSS 子元素选择器与后代选择器区别实例讲解
css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...
- CSS系列(8) CSS后代选择器和子选择器详解
一.CSS后代选择器详解 1, 生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> < ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
随机推荐
- vue学习过程总结（08） - vue开发报错提示缺少本地文件的包
vue开发启动过程会报错某个src下自己写的包找不到为安装,原因有两个 1.import的from后面的路径不正确 2.如果开发中用到了scss是也会一直报这个错,这时候可能你没有安装scss加载器, ...
- C# WinForm 设置按纽为透明，使用背景色
今天开发登陆界面时,遇到一个窗体控制设置问题: 1.将按纽设置为透明: 2.并且使用背景图片的颜色: 3.并且需要当点击这个按纽时,仍然显示背景图片颜色: 4.去掉按纽边框显示线: 需要的效果如下: ...
- 无传感FOC控制中的转子位置和速度确定方法一
使用PLL估算器在无感的情况下,估计转子的角度和角速度 PLL估算器的工作原理基于反电动势的d分量在稳态下等于零,其框图如下: ΚΦ 表示电压常量,下面给出了电气转速计算中使用的归 一化 ΚΦ : ...
- 解决Hadoop集群hdfs无法启动DataNode的问题
问题描述: 在hadoop启动hdfs的之后,使用jps命令查看运行情况时发现hdfs的DataNode并没有打开. 笔者出现此情况前曾使用hdfs namenode -format格式化了hdfs ...
- Java 实现汇总排序
排序在系统中经常能用到,一般可以在数据库做排序,也可以在服务端做排序.在数据库一般使用 order by 排序.而服务端也是使用快排.本期使用汇总排序. 问题 统计销售数据,每个销售员都有对应的部门和 ...
- 在centos7上安装iptables防火墙
规则配置: iptables -P OUTPUT ACCEPT 1.关闭原先CentOS7自带的firewall防火墙: systemctl stop firewalld 2.安装或更新iptable ...
- docker容器登录，退出等操作命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口 ...
- Jinkins流水线脚本使用curl命令调用服务接口，并且使用url传参。
curl http://xxx.xx.xx.xx:xxxx/jenkins/publish?fileName=${fileName}&tag_name=${tag_name} 如图调用不符合c ...
- Error和Exception有什么区别？
Error表示系统级的错误和程序不必处理的异常,是恢复不是不可能但很困难的情况下的一种严重问题:比如内存溢出,不可能指望程序能处理这样的情况:Exception表示需要捕捉或者需要程序进行处理的异常, ...
- 学习zabbix（九）
一.Zabbix环境准备 [root@linux-node1 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [roo ...