css如何排除第一个子元素

4种方法:1、用“:not()”和“:first-child”,语法“元素:not(:first-child){样式}”;2、用“:nth-of-type”,语法“元素:nth-of-type(n+2){样式}”;3、用“:nth-child”,语法“元素:nth-child(n+2){样式}”;4、用选择符“+”或“~”,语法“元素+元素{样式}”或“元素~元素{样式}”。

css如何排除第一个子元素

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css排除第一个子元素的4种方法

方法1:使用选择器:not()和:first-child

利用:first-child选取第一个元素

立即学习“前端免费学习笔记(深入)”;

然后使用:not()匹配非第一个子元素的其他元素

示例:给除了第一个子元素的其他元素添加红色背景

nbsp;html>.dom div {float: left;height: 150px;line-height: 150px;width: 150px;margin: 20px;background: #ccc;text-align: center;color: #fff;}.dom  div:not(:first-child){    background:red;}
1
2
3

登录后复制

1.png

说明:

:not(selector) 选择器匹配非指定元素/选择器的每个元素。

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。

方法2:使用:nth-of-type()

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n是从0开始的,那么n+2自然就是从第2个元素开始了。

.dom div:nth-of-type(n+2){background:pink;}

登录后复制

2.png

同理如果选中单数元素那么就是2n+1;如果是想选中双数元素,那么就应该写成2n+2;具体情况可以根据项目情况使用。

.dom div:nth-of-type(2n+1){background:pink;}.dom div:nth-of-type(2n+2){background:green;}

登录后复制

3.png

方法3:使用:nth-child()

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

方法3和方法2类型,设置()的值为“n+2”即可。

.dom div:nth-child(n+2){background:green;}

登录后复制

4.png

方法4:使用兄弟选择符+或者~

+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

~ 选择器 :作用是查找某一个指定元素的后面的所有兄弟结点。

由于都是div元素,第一个元素没有兄弟元素,所以就能获取除第一个之外的子元素。

.dom div+div{   background:red;}

登录后复制

5.png

.dom div+div{   background:peru;}

登录后复制

6.png

(学习视频分享:web前端入门)

以上就是css如何排除第一个子元素的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2865769.html

(0)
上一篇 2025年3月10日 17:43:06
下一篇 2025年3月5日 16:21:31

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 一文详解三个 flex 属性对元素的影响

    在开发的时候经常用 flex 这个属性作用于弹性盒子的子元素,例如:flex:1或者flex: 1 1 auto,那么这个属性到底控制了元素怎么的行为呢?flex:1又究竟是什么含义呢?让这篇文章带你彻底了解 flex 属性吧!【推荐学习:…

    2025年3月10日 编程技术
    200
  • 详解用SVG给 favicon 添加标识

    怎么使用svg给 favicon 添加标识?下面本篇文章给大家介绍一下使用 svg 生成带标识的 favicon的方法,希望对大家有所帮助! 之前做了一个 Chrome 插件,可以根据地址的不同生成不同的图标,这样可以很方便的区分不同的开发…

    2025年3月10日 编程技术
    200
  • 手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画?下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法,希望对大家有所帮助! 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行…

    2025年3月10日 编程技术
    200
  • 巧用 CSS混合模式 让文字智能适配背景颜色

    页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色。像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色。看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 …

    2025年3月10日 编程技术
    200
  • CSS技巧分享:纯CSS实现表格响应式布局

    如何利用纯css实现表格响应式布局?下面本篇文章就来给大家分享超 nice 的表格响应式布局小技巧,希望对大家有所帮助! 今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果:…

    2025年3月10日 编程技术
    200
  • 一文聊聊 9 个冷门的css属性

    可能我们有时候潜意识里认为, 当前实际开发中css属性已经足够用了, 但是前段时间突然想到:”会不会我们只是思维被限制在了常用的css属性中, 从而丧失了创造力”, 就像发明 车 之前大多数人会认为 骑马 已经足够快…

    2025年3月10日 编程技术
    200
  • 如何写出优雅耐看的css代码?css命名小技巧分享!

    如果使用 css 有一段时间,那么您就会知道继承、特异性和命名是一些最难处理的事情。由于所有 css 都是全局的,随着代码库的增长,防止样式相互冲突并导致意外副作用变得越来越困难!下面本篇文章给大家分享一些css命名小技巧,让我们的代码优雅…

    2025年3月10日
    200
  • 总结分享几个借助 CSS 来更好的控制定时器的方法

    平时工作中很多场合都要用到定时器,比如延迟加载、定时查询等等,但定时器的控制有时候会有些许麻烦,比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法,一起了解一下吧,相信可以带来不一样的体验。【推荐学习:cs…

    2025年3月10日 编程技术
    200
  • 巧妙利用 CSS 实现文字二次加粗和多重边框效果

    如何二次加粗文字?如何实现多重边框?下面本篇文章就来给大家介绍一下巧妙利用 css 实现文字二次加粗和多重边框效果,希望对大家有所帮助! 登录后复制 p { font-size: 64px; letter-spacing: 6px; fon…

    2025年3月10日
    200
  • 聊聊为什么不应该依赖CSS 100vh?

    为什么不应该依赖css 100vh?下面本篇文章就来带大家聊聊原因,希望对大家有所帮助! 如果有一个文本和一个按钮,我们想让文本粘在上面,而按钮粘在下面!使用CSS Flex 似乎很容易做到。【推荐学习:css视频教程】 // HTML L…

    2025年3月10日 编程技术
    200

发表回复

登录后才能评论