网站首页 > 技术文章 正文
使用 CSS 的:not()伪类选择器和:nth-child()伪类选择器
要通过CSS的代码选择某一个元素的除了第一个子元素外的其余的跟第一个子元素同级的子元素,可以结合使用CSS的:not()伪类选择器和:nth-child()伪类选择器进行选择。大致的语法如下:
.parent > .child:not(:nth-child(1)) {样式设置}
CSS选择除了第一个子元素外同级子元素实例代码,及在线编辑器
下面的实例中除了使用上述的两种伪类选择器之外,还结合了class属性:
<div class='p'>
<div class='c'>p的第一个子元素</div>
<div class='c'>p的第二个子元素</div>
<div class='c'>p的第三个子元素</div>
</div>
<style>
.p > .c:not(:nth-child(1)){color:green;}
</style>
原文及在线编辑器:CSS怎么选择除了第一个子元素外的其余同级子元素 | CSS教程
猜你喜欢
- 2024-11-09 「项目实战」.作家管理系统之Web应用(四)
- 2024-11-09 jQuery 单引号和双引号区别 js单双引号转义
- 2024-11-09 jQuery的DOM操作 jquery对象和dom对象
- 2024-11-09 CSS2与CSS3中常用的伪类汇总大全 css伪类hover
- 2024-11-09 自动化测试:Selenium八大元素定位简单介绍
- 2024-11-09 想让AI 驱动 UI 测试?大佬推荐这个自动化工具!
- 2024-11-09 js函数--倒计时模块+无缝滚动 js实现倒计时60秒的简单代码
- 2024-11-09 Web前端开发-CSS中伪类和伪元素 css3伪类和伪元素
- 2024-11-09 CSS 中的最后一个子级选择器与最后一个类型选择器
- 2024-11-09 关于前端开发的20篇文档与指南 前端开发方法
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-