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代表里面完全空白的元素
相关文章
|
7天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
99 7
|
2月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
67 2
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
|
3月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
68 0
|
5月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
5月前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
135 3
|
5月前
|
XML 前端开发 数据格式
想拿月薪1万吗?先掌握这CSS基础结构技巧!
想拿月薪1万吗?先掌握这CSS基础结构技巧!
|
5月前
|
XML 前端开发 安全
如何使用 CSS 中的 :root 伪类选择器
如何使用 CSS 中的 :root 伪类选择器
153 0
|
7月前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器

热门文章

最新文章