回顾

基本选择器又分为三种方式：

后代选择器
子选择器
相邻选择器
通用选择器

结构伪类选择器

结构伪类选择器有很多种伪类，这里我们列举常用的几种方式：

first-child 伪类
hover悬停伪类
nth-of-type() 伪类
nth-child()伪类

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>结构伪类选择器</title><style>/*ul的第一个子元素*/ul li:first-child{background: pink;}/*ul的最后一个子元素*/ul li:last-child{background: deeppink;}/*定位当前元素的父级元素，选择父级元素的第n个子元素的当前元素*/p:nth-child(2){background: #001aff;}/*定位当前元素的父级元素，选择父级元素的当前元素种类的第n个子元素*/p:nth-of-type(2){background: red;}/*鼠标悬停在该元素的时候*/a:hover{background: red;border-radius: 2em;}a{text-decoration: none;}</style>
</head>
<body>
<h>h1</h>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>p4</li><li>p5</li><li>p6</li>
</ul>
<a href="">这是一个连接</a>
</body>
</html>

测试效果

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

CSS学习05之结构伪类选择器相关推荐

CSS基础(part20)--CSS3结构伪类选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案结构伪类选择器属性列表: nth-child(n) 参数详解: 注意:本质上就是选中第几个子元素 n可以是数字.关键字.公式 n如果是数字,就 ...
【温故知新】CSS学习笔记（链接伪类选择器）
链接伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果. 之前我们学过类选择器,以点"."开头,为了区分开来,伪类选择器则是以冒号":" ...
CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
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 ...
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新增的属性、结构伪类选择器，帮你快速找到那个对的人
文章目录前言一.属性选择器二.结构伪类选择器总结前言今天学会了这几个新的选择器会为我们节省很多代码,简化HTML结构,对于起名困难户也会有很大的帮助. 提示:以下是本篇文章正文内容,下面案 ...

CSS学习05之结构伪类选择器

回顾

结构伪类选择器

示例

测试效果

作者有话说

CSS学习05之结构伪类选择器相关推荐

最新文章

热门文章