广告
返回顶部
首页 > 资讯 > 精选 >css如何选中父元素下的第一个子元素
  • 369
分享到

css如何选中父元素下的第一个子元素

2023-06-08 02:06:45 369人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了CSS如何选中父元素下的第一个子元素,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css如何选中父元素下的第一个子元素”这篇文章吧。E:first-child的第一个误区(

这篇文章主要为大家展示了CSS如何选中父元素下的第一个子元素,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css如何选中父元素下的第一个子元素”这篇文章吧。

E:first-child的第一个误区(只会选中我规定的区域中的一个,不会遍历其下有多少个孙或曾孙元素)

<!DOCTYPE html><html><head><style>body p:first-child{background-color:yellow;}</style></head><body><p>这个段落是其父元素(body)的首个子元素。</p><h2>欢迎访问我的主页</h2><p>这个段落不是其父元素的首个子元素。</p><div><p>这个段落是其父元素(div)的首个子元素。</p><p>这个段落不是其父元素的首个子元素。</p></div><p><b>注释:</b>对于 IE8 及更早版本的浏览器中的 :first-child,必须声明 <!DOCTYPE>。</p></body></html>

上面的代码真的是只会有一个p标签生效吗?

css如何选中父元素下的第一个子元素

这是后就已经犯了我们常见的第一个误区,认为body p:first-child选中的就是第一个元素。

其实,只要在我们选中的body这一块中,如果这个p在其父元素中属于第一个,那它就被选中。

E:first-child的第二个误区(不管这个E元素前面有几个兄弟,只要我是第一个E元素,那我就会生效)

css如何选中父元素下的第一个子元素

还是上面的代码,但是我们在body中的p标签前加了一个font标签,发现p已经失效了。
上面的两个例子已经很清楚的告诉我们了这个选择器到底应该怎么用

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

如何只选择指定元素中子元素呢?不考虑膝下有多少个孙子和曾孙呢。

子选择器(>) :只能选择作为某元素儿子元素的元素(直接子元素),不包括孙元素、曾孙元素等等等
还拿上面的代码举例,将>添上试一下效果

css如何选中父元素下的第一个子元素

以上就是关于“css如何选中父元素下的第一个子元素”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注编程网精选频道。

--结束END--

本文标题: css如何选中父元素下的第一个子元素

本文链接: https://www.lsjlt.com/news/251162.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css如何选中父元素下的第一个子元素
    这篇文章主要为大家展示了css如何选中父元素下的第一个子元素,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css如何选中父元素下的第一个子元素”这篇文章吧。E:first-child的第一个误区(...
    99+
    2023-06-08
  • 怎么用css匹配选择属于其父元素的第N个子元素
    这篇文章主要讲解了“怎么用css匹配选择属于其父元素的第N个子元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用css匹配选择属于其父元素的第N个子元...
    99+
    2022-10-19
  • CSS子元素选择父元素的示例分析
    这篇“CSS子元素选择父元素的示例分析”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“CSS子元素选择父元素的示例分析”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让...
    99+
    2023-06-08
  • css如何隐藏父元素显示子元素
    小编给大家分享一下css如何隐藏父元素显示子元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在c...
    99+
    2022-10-19
  • CSS如何实现子元素跟父元素的高度一致
    这篇文章主要为大家展示了CSS如何实现子元素跟父元素的高度一致,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“CSS如何实现子元素跟父元素的高度一致”这篇文章吧。绝对定位方法:(1)将父元素设置为相...
    99+
    2023-06-08
  • JS删除某个父元素下的所有子元素
    JS中如何删除某个父元素下的所有子元素?这里我介绍几种方法: 1.通过元素的 innerHTML 属性来删除   这种方式我觉得是最有方便的,直接找到你想要的父元素,直接令其 ele...
    99+
    2022-11-13
  • css怎么排除第一个子元素
    这篇文章主要介绍了css怎么排除第一个子元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css怎么排除第一个子元素文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2022-10-19
  • css3筛选如何除去第一个元素的元素
    本篇内容主要讲解“css3筛选如何除去第一个元素的元素”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3筛选如何除去第一个元素的元素”吧! ...
    99+
    2022-10-19
  • css排除第一个子元素的方法
    这篇文章主要介绍“css排除第一个子元素的方法”,在日常操作中,相信很多人在css排除第一个子元素的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css排除第一个子元素的方法”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-14
  • css如何设置第一个子元素的高度
    小编给大家分享一下css如何设置第一个子元素的高度,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在...
    99+
    2022-10-19
  • css如何选择div下的第几个p元素
    这篇文章主要讲解了“css如何选择div下的第几个p元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何选择div下的第几个p元素”吧! ...
    99+
    2022-10-19
  • css选择第几个子元素用哪个选择器
    这篇文章给大家分享的是有关css选择第几个子元素用哪个选择器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在css中,想要选择指定元素中第几个子元素,可以使用“:nth-child()”选择器。“:nth-chi...
    99+
    2023-06-15
  • jquery如何选择第几个子元素
    本篇内容主要讲解“jquery如何选择第几个子元素”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何选择第几个子元素”吧! ...
    99+
    2022-10-19
  • 使用:only-child伪类选择器选择父元素只有一个子元素的样式
    使用:only-child伪类选择器选择父元素只有一个子元素的样式CSS是前端开发中必不可少的一部分,它为网页提供了丰富的样式,让我们的页面更加美观和易读。其中,伪类选择器是CSS中非常有用的一种技术,它可以选择不同的元素和状态进行样式设置...
    99+
    2023-11-20
    只子样式选择
  • css如何选择子元素
    这篇文章给大家分享的是有关css如何选择子元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 选择子元素 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子...
    99+
    2022-10-19
  • jquery如何判断一个元素是否是另一个元素的子元素
    今天小编给大家分享一下jquery如何判断一个元素是否是另一个元素的子元素的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。两种...
    99+
    2023-07-04
  • 纯CSS如何让子元素突破父元素的宽度限制
    这篇“纯CSS如何让子元素突破父元素的宽度限制”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“纯CSS如何让子元素突破父元素的宽度限制”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇...
    99+
    2023-06-08
  • jquery怎么插入指定元素到父元素的第一个位置
    本篇内容主要讲解“jquery怎么插入指定元素到父元素的第一个位置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery怎么插入指定元素到父元素的第一个位置...
    99+
    2022-10-19
  • css中子元素从父元素继承属性的示例分析
    这篇文章主要介绍了css中子元素从父元素继承属性的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 秉持及其标题问题 按照 CSS...
    99+
    2022-10-19
  • CSS如何实现子元素相对于父元素固定定位
    这篇“CSS如何实现子元素相对于父元素固定定位”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“CSS如何实现子元素相对于父元素固定定位”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作