网页制作

css选中父元素下的第一个子元素(:first-child)
网页制作 2024/11/15 佚名
3 2

前言

最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？

好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个元素，对孙元素和曾孙元素没有影响。事实证明，我的理所当然是错的。

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

<!DOCTYPE html>
<html>
<head>
<style>
body p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>

<p>这个段落是其父元素（body）的首个子元素。</p>

<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p>

<div>
<p>这个段落是其父元素（div）的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>

<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p>

</body>
</html>

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

css选中父元素下的第一个子元素(:first-child)

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

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

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

css选中父元素下的第一个子元素(:first-child)

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

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

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

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

css选中父元素下的第一个子元素(:first-child)

有时候使用错误的选择器，却没有报错。但错了就是错了。总有被发现的时候。
很庆幸这次的错误让我学到了知识。

标签：
CSS,:first-child,父元素下的第一个子元素
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com