笔记|使用CSS选择器(使用结构性伪类选择器)

简介: 使用结构性伪类选择器

1、使用结构性伪类选择器

使用结构性伪类选择器能够根据元素在文档中的位置选择元素。前缀为(:)


1.1、使用根元素选择器

:root选择器:匹配文档中的根元素。用得最少,总是返回html元素。

image.png

<style type="text/css">
:root {
border: thin black solid;
padding: 4px;
}
</style> 
边框包着整个文档。


1.2、使用子元素选择器

子元素选择器:匹配直接包含在其他元素中的单个元素。

image.png


  • 使用:first-child选择器

:first-child选择器:匹配由包含它们的元素(父元素)定义的第一个子元素

<style type="text/css">  
 :first-child {
border: thin black solid;
padding: 4px;
}
</style>      
匹配任意元素的第一个子元素。


将:first-child选择器用做修饰符,或跟其他选择器组合使用可以缩小选中元素的范围。

<style type="text/css">
p > span:first-child {
border: thin black solid;
padding: 4px;
}
</style>
匹配作为p元素第一个子元素的任意span元素。


  • 使用:last-child选择器


:last-child选择器:匹配由包含它们的元素定义的最后一个元素

<style type="text/css">
:last-child {
border: thin black solid;
padding: 4px;
}
</style>

 

  • 使用:only-child选择器

:only-child选择器匹配父元素包含的唯一子元素。

<style type="text/css">
:only-child {
border: thin black solid;
padding: 4px;
}
</style>


  • 使用:only-of-type选择器

:only-of-type选择器匹配父元素定义类型的唯一子元素

<style type="text/css">
:only-of-type {
border: thin black solid;
padding: 4px;
}
</style>


1.3、使用:nth-child p选择器

与子元素选择器类似,但使用这类选择器可以指定一个索引以匹配特定位置的元素。

image.png


索引从1开始。

<style type="text/css">
body > :nth-child(2) {
border: thin black solid;
padding: 4px;
}
</style>


⚠️nth-child选择器与常规子选择器的作用一样,只是加了个索引值。


目录
相关文章
|
18天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
116 44
|
10天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
10 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
18天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
16 4
|
8天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
14 0
|
14天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
14 0
|
14天前
|
前端开发
CSS2(一):CSS选择器(2)
CSS2(一):CSS选择器(2)
10 0
|
14天前
|
前端开发
CSS2(一):CSS选择器(1)
CSS2(一):CSS选择器(1)
10 0
|
14天前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
13 0
|
19天前
|
前端开发
CSS 选择器优先级详解及实例演示
CSS 选择器优先级详解及实例演示
9 0
|
前端开发 Web App开发
css使用笔记
最近写一个前台页面,因为不用考虑太多兼容性问题,尝试了很多css3的东西,记录下。 1、渐变和边框阴影 最初的视觉稿,上面有很多地方颜色使用了渐变,为了不使用图片,用了很挫的方式来实现:从图片渐变开始、中间、结束部分,用gimp的吸管获取颜色,然后转换成css的渐变。不过因为渐变每个浏览器支持方
1590 0