CSS结构伪类

简介: CSS结构伪类

1677577892293.png


1  :nth-child


  • :nth-child(1)
  • 是父元素中的第1个子元素
  • :nth-child(2n)
  • n代表任意正整数和0
  • 是父元素中的第偶数个子元素(第2 、4、6、8......个)
  • 跟:nth-child(even)同义
  • :nth-child(2n + 1)
  • n代表任意正整数和0
  • 是父元素中的第奇数个子元素(第1、3、5、7......个)
  • 跟:nth-child(odd)同义
  • :nth-child(-n + 2)
  • 代表前2个子元素


2  :nth-last-child( )


  • :nth-last-child(1),代表倒数第一个子元素
  • :nth-last-child(-n + 2),代表最后2个子元素


3  :nth-of-type( )、:nth-last-of-type( )


  • :nth-of-type()用法跟:nth-child()类似
  • 不同点是:nth-of-type()计数时只计算同种类型的元素
  • :nth-last-of-type()用法跟:nth-of-type()类似
  • 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数


4 否定伪类


  • :not()的格式是:not(x)
  • x是一个简单选择器(元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类)除否定伪类
  • :not(x)表示除x以外的元素


5 其它偶尔会用的


  • :root,根元素,就是HTML元素
  • :empty代表里面完全空白的元素
目录
相关文章
|
1月前
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
48 12
|
1月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
8天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
3天前
|
前端开发
css常用的伪类有哪些
css常用的伪类有哪些
|
1月前
|
前端开发
|
1月前
|
前端开发
css结构伪类
css结构伪类
17 2
|
1月前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
38 4
|
1月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
|
1月前
|
XML 前端开发 开发者
css基本结构
【4月更文挑战第20天】css基本结构
20 7
|
1月前
|
前端开发
css的基础结构
【4月更文挑战第14天】css的基础结构
31 6