:nth-child(n)

选择器匹配父元素中的第 n 个子元素，元素类型没有限制

实现代码：

<template><div class="jo"><p>1</p><p>2</p><p>3</p></div>
</template>
<style lang="scss" scoped>
.jo {border: 1px solid white;font-size: 20px;color: white;width: 400px;text-align: center;p {line-height: 30px;&:nth-child(1) {background: red;}&:nth-child(2) {background: green;}&:nth-child(3) {background: blue;}}
}
</style>

:first-child、:last-child

:first-child 选择器用来匹配父元素中第一个子元素。
:last-child 选择器用来匹配父元素中最后一个子元素。

<template><div class="jo"><p>1</p><p>2</p><p>3</p></div>
</template><style lang="scss" scoped>
.jo {border: 1px solid white;font-size: 20px;color: white;width: 400px;text-align: center;p {line-height: 30px;&:first-child {background: red;}&:last-child {background: blue;}}
}
</style>

CSS中的:nth-child，:first-child，:last-child相关推荐

CSS中的四种样式及选择器
CSS语法选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 属性:属性是指定选择符所具有的属性,它是css的核心,css2共有150多个属性属性值:属性值包括法定属 ...
【转】在CSS中 ID与Class的区别?谢谢
在样式表定义一个样式的时候,可以定义id也可以定义class.1.在CSS文件里书写时,ID加前缀"#":CLASS用"."2.id一个页面只可以使用一次:cl ...
css 菜单栏悬停_在CSS中构建悬停菜单
css 菜单栏悬停 A good menu design is an important part of any website or web app UI. Using only modern HT ...
CSS中的偏僻知识点
一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...
css中的大于号是什么意思有何作用
css中的大于号是什么意思有何作用 .menu :hover > a { color:white; background-color:white ; font-weight:bold; } ...
关于css中class属性多值问题（亲测，各种情况，附详细代码）
css中几种情况: 一..class之间没有空格 /*这样写之间没有空格表示有个class属性是这样写的 class="first first1 first2" 并且这样写,优先级 ...
CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
css中的单位换算_CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: .parent{ width:400px; height:300px; border:1px solid #ccc; } .child{ margin:10%; ...
5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
html css 中浮动影响与浮动问题的解决
html css 中浮动影响与浮动问题的解决浮动浮动就是使元素脱离文档流且块级元素在同一行显示(文档流:元素在页面中所占的位置) 浮动特性:脱离文档流,原先位置不保留,飘在文档流的上方. 给元素设 ...

CSS中的:nth-child，:first-child，:last-child

:nth-child(n)

:first-child、:last-child

CSS中的:nth-child，:first-child，:last-child相关推荐

最新文章

热门文章