Css 结构伪类选择器

在日常开发中，结构伪类选择器用的还是比较多的熟练的使用它，可以让我们的代码更整洁。

作用与优势：

作用：根据元素在HTML中的结构关系查找元素。
优势：减少对于HTML中类的依赖，有利于保持代码的整洁，毕竟起名字也是一个难题。
应用场景：常用于查找某个父级选择器中的子元素。

选择器：

选择器	描述
E:first-child {}	匹配父元素中第一个子元素，并且是E元素
E:last-child {}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n)	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n)	匹配父元素中倒数第n个子元素，并且是E元素

<!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>Document</title><style>/* 匹配父元素中第一个子元素 *//* li:first-child {background-color: pink;} *//* 匹配父元素中最后一个子元素 *//* li:last-child {background-color: pink;} *//* 匹配父元素中第三个子元素 *//* li:nth-child(3) {background-color: pink;} *//* 匹配父元素中倒数第n个子元素 */li:nth-last-child(1) {background-color: pink;}</style>
</head><body><ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li><li>我是第6个li</li><li>我是第7个li</li><li>我是第8个li</li></ul>
</body></html>

结构伪类-公式

结构伪类中的n不光可以指定元素，还可以书写公式

n：0，1，2，3，4，5，6，7…

常见公式

功能	公式
偶数	2n，even
奇数	2n+1，2n-1，odd
找到前五个	-n+5
从第五个往后	n+5

<!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>Document</title><style>/* 二的倍数 *//* li:nth-child(2n) {background-color: pink;} *//* 选中前六个元素 */li:nth-child(-n+6) {background-color: pink;}</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>

Css 结构伪类选择器相关推荐

CSS结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器选择器功能描述版本 E:last-chi ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
CSS学习05之结构伪类选择器
回顾基本选择器又分为三种方式: 后代选择器子选择器相邻选择器通用选择器结构伪类选择器结构伪类选择器有很多种伪类,这里我们列举常用的几种方式: first-child 伪类 hover悬停伪 ...
CSS基本选择器、层次选择器、结构伪类选择器、属性选择器
目录基本选择器 1.标签选择器 2.类选择器 3.ID选择器层次选择器结构伪类选择器属性选择器基本选择器 1.标签选择器 2.类选择器 3.ID选择器层次选择器选择器类型功能描 ...
CSS基础(part20)--CSS3结构伪类选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案结构伪类选择器属性列表: nth-child(n) 参数详解: 注意:本质上就是选中第几个子元素 n可以是数字.关键字.公式 n如果是数字,就 ...
CSS新增的属性、结构伪类选择器，帮你快速找到那个对的人
文章目录前言一.属性选择器二.结构伪类选择器总结前言今天学会了这几个新的选择器会为我们节省很多代码,简化HTML结构,对于起名困难户也会有很大的帮助. 提示:以下是本篇文章正文内容,下面案 ...
html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...

Css 结构伪类选择器

目录

Css 结构伪类选择器

结构伪类-公式

Css 结构伪类选择器相关推荐

最新文章

热门文章