CSS结构伪类选择器

最新推荐文章于 2024-03-28 23:22:23 发布
最新推荐文章于 2024-03-28 23:22:23 发布
阅读量274 收藏 1
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67841039/article/details/123768186
版权

1.1、作用与优势

作用:可以根据元素在HTML中的结构关系查找元素。
优势:减少对于HTML类的依赖，有助于保持代码整洁。
场景:常用于查找某父级选择器中的子元素。

2.1、选择器功能描述

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

3.1、n的注意点：

  1. n为：0、1、2、3、4、5、6、……
  2. 通过n可以组成常见公式
功能公式
偶数2n、even
奇数2n+1、2n-1、odd
找到前五个-n+5
找到从第3个往后n+3

案例展示

此时想找到第一个a标签，如何去查找？
在此时这里插入图片描述
正确做法：先找到第一个li
在这里插入图片描述
效果展示：
在这里插入图片描述

奋斗吧程序媛
关注
CSS-5-结构伪类选择器
baidu_38126306的博客
12-06 206
CSS -> 结构伪类选择器 伪类：条件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--避免使用class选择器和id选择器--> <style> /*ul的第一个子元素*/ ul li:fir
CSS3结构性伪类选择器九种写法
01-19
一、X:nth-child(n) ...demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
【CSS】结构伪类选择器
weixin_45378289的博客
01-05 117
伪类：条件 /*ul的第一个子元素*/ li:first-child { background: red; } /*ul的最后一个子元素 */ li:last-child { background: red; } /*定位到父元素，选择当前的第一个元素
CSS结构性伪类选择器
weixin_46421045的博客
03-19 129
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .list{ width: 400px; ...
css中的结构伪类选择器
xiaosheng
12-20 184
first-child ---------匹配第一个孩子 last-child ---------匹配最后一个孩子 nth-child(n) ----- 匹配第n个孩子 nth-child(2n)或者nth-child(even) --------匹配偶数的孩子 nth-child(2n+1)或者nth-child(odd) --------匹配奇数的孩子 ...
CSS——结构伪类选择器
Java学不会的博客
05-19 181
文章目录1、选择子元素2、定位到父级元素的当前元素 伪类：条件（过滤） 1、选择子元素 /*ul的第一个子元素*/ ul li:first-child{ background: #03f39f; } /*ul的最后一个个子元素*/ ul li:last-child{ background: red; } 2、定
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
结构伪类选择器（总结）
12-22
结构伪类选择器是CSS中的一个重要概念，...总的来说，结构伪类选择器为CSS提供了强大的定位能力，让开发者可以更好地控制网页的布局和样式，提升用户体验。理解并熟练运用这些选择器是成为高级CSS开发者的必要步骤。
HTML5&CSS3网页制作：结构化伪类选择器.pptx
05-31
HTML5和CSS3是现代网页制作的核心技术，其中CSS3的结构化伪类选择器是增强网页样式控制的重要工具。这些选择器允许开发者更精确地定位和应用样式，提高页面设计的灵活性和可维护性。 首先，`:root`选择器用于选取...
css结构伪类选择器
qq_43840699的博客
07-04 104
CSS基础----结构伪类选择器
淋雨一直走的博客
06-05 193
个人理解，结构伪类选择器可以说是层次选择器的升级版，所以在前面层次选择器的基础上，理解起来就比较简单了 语法和功能如下： 测试代码 /*ul的第一个子元素*/ ul li:first-child{ background: red; } /*ul的最后一个子元素*/ ul li:last-child{ background: green; } li1和li3很显然，分别是ul的first child和last child，所以分别是红色和绿色 p:nth-child(1){ backgrou
CSS 结构伪类选择器 伪元素选择器 盒子模型
最新发布
qq_67140973的博客
03-28 1222
盒子模型的重要组成部分：内容区域(width & height) 内边距：padding（出现在内容与盒子边缘之间）边框线：border 外边距：margin（出现在盒子外面）
CSS——介绍结构伪类选择器
万里顾一程的博客
11-20 341
CSS——结构伪类选择器 结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。 结构伪类选择器的测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul li:first-ch
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值