CSS基础(part20)--CSS3结构伪类选择器

学习笔记，仅供参考，有错必究

参考自：pink老师教案

结构伪类选择器

属性列表：

nth-child(n) 参数详解：

注意：本质上就是选中第几个子元素
n可以是数字、关键字、公式
n如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
如果是第0个元素，或者超出了元素的个数会被忽略

nth-child 和 nt-of-type 的区别：

nth-child 选择父元素里面的第几个子元素，不管是何种类型
nt-of-type 选择指定类型的元素

举个例子

示例代码1：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器</title><style>ul li:first-child {background-color: pink;}ul li:last-child {background-color: deeppink;}/* nth-child(n)  我们要第几个，n就是几  比如我们选第8个， 我们直接写 8就可以了 */ul li:nth-child(5) {background-color: blue;}</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><li>8</li></ul>
</body></html>

页面：

示例代码2：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器</title><style>/* even 是偶数  odd 是奇数 */ul li:nth-child(odd) {background-color: pink;}/* 2n 偶数  类似于 even */ul li:nth-child(2n) {background-color: blue;}</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><li>8</li></ul>
</body></html>

页面：

示例代码3：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器</title><style>div span:nth-child(3) {background-color: pink;}/* of-type 选择指定类型的元素 */div span:first-of-type {background-color: purple;}div span:last-of-type {background-color: skyblue;}div span:nth-of-type(3) {background-color: red;}</style>
</head><body><div><p>我p标签</p><span>我是span1</span><span>我是span2</span><span>我是span3</span><span>我是span4</span></div></body></html>

页面：

CSS基础(part20)--CSS3结构伪类选择器相关推荐

CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
CSS学习05之结构伪类选择器
回顾基本选择器又分为三种方式: 后代选择器子选择器相邻选择器通用选择器结构伪类选择器结构伪类选择器有很多种伪类,这里我们列举常用的几种方式: first-child 伪类 hover悬停伪 ...
CSS3新特性(属性选择器、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀）
这里写目录标题一.CSS3 属性选择器二.CSS3 结构伪类选择器三. CSS3 伪元素选择器四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器选择器功能描述版本 E:last-chi ...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
目录 1.属性选择器 2. 结构伪类选择器 nth-child(n) nth-of-type(n): nth-child和nth-of-type的区别 3. 伪元素选择器 1.属性选择器 E[att ...
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
Css 结构伪类选择器
目录 Css 结构伪类选择器结构伪类-公式 Css 结构伪类选择器在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
CSS基本选择器、层次选择器、结构伪类选择器、属性选择器
目录基本选择器 1.标签选择器 2.类选择器 3.ID选择器层次选择器结构伪类选择器属性选择器基本选择器 1.标签选择器 2.类选择器 3.ID选择器层次选择器选择器类型功能描 ...

CSS基础(part20)--CSS3结构伪类选择器

结构伪类选择器

CSS基础(part20)--CSS3结构伪类选择器相关推荐

最新文章

热门文章