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

最新推荐文章于 2024-09-11 10:34:35 发布
最新推荐文章于 2024-09-11 10:34:35 发布
阅读量2.8w 收藏 15
点赞数 14
分类专栏： 教程 文章标签： css 关系选择器 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eden00/article/details/105279921
版权
本文探讨了CSS中的`:first-child`选择器常见误区，解释了其实际选择的是父元素的第一个子元素，而非遍历所有子孙元素。通过示例代码解析了如何正确使用该选择器，并介绍了子选择器`>`来精确匹配直接子元素。
摘要由CSDN通过智能技术生成

目录标题

前言

最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？
好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个元素，对孙元素和曾孙元素没有影响。事实证明，我的理所当然是错的。

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

<!DOCTYPE html>
<html>
<head>
<style>
body
最低0.47元/天 解锁文章
一个不想上班的程序猿
关注
专栏目录
css选中父元素下的第一个子元素(:first-child)
11-19
在CSS（层叠样式表）中，`:first-child`伪类选择器是一个非常有用的工具，它允许我们选择并应用样式给父元素下的第一个子元素。然而，在实际使用中，可能会出现一些误解，导致预期效果与实际效果有所偏差。本文将...
css获取第一个子元素
yangwq的博客
01-22 1万+
p:first-child { background-color:yellow; }
css 选择其父元素下的某个元素
weixin_33721427的博客
08-17 2865
一,选择器 　　:first-child　　　　p:first-child(first第一个 child子元素)(找第一个子元素为p) 　　:last-child　　　　p:last-child(last倒数 child子元素)(找倒数第一个子元素为p) 　　:first-of-type　　 p:first-of-type(first第一个 type类型)(找第一个p) ...
如何通过CSS选择器选择一个元素的子元素
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-11 1659
随着CSS3的引入，我们有了更多强大而灵活的选择器来精确控制页面上的元素样式。本篇文章将深入探讨如何利用CSS选择器来选定特定的子元素，并展示一些实际应用场景，以帮助你在项目中更高效地运用这些知识。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。有时候我们需要针对特定类别的子元素应用样式，这时我们可以结合类选择器来进一步细化我们的目标。这个选择器仅匹配那些直接由前面指定的元素所包含的子元素，而不包括更深层次的后代元素。专栏系列（点击解锁）
CSS 选择器大全 伪类选择器大全
黄钟飞的博客
02-28 1411
css选择器大全,css伪类选择大全,前置伪类,后置伪类,伪类筛选,常用选择器,交集选择器
javascript中的firstchild
bofengshuimen700的专栏
05-27 8441
Microsotf Yahoo Easy W3c/Javascript Design|Source var container=document.getElementById("contain");
css选择第一个子元素或者非第一个子元素有哪些方法实现
juju的博客
03-05 1万+
如果我们要获取到ul标签下面的第一个li标签来设置样式，有哪些css方法来实现呢？ 一 、获取第一个元素 1. 使用 :first-child ul li:first-child { ...... } 2. 使用 :first-of-type ul li:first-of-type { ...... } 3. 使用 :nth-child ul li:nth-child(1){ ...... } 4. 使用 :nth-of-type ul li:nth-of-type(1){ ...... }
css选择第一个子元素ul,CSS3的first-child选择器实战攻略
weixin_42560991的博客
08-03 5301
CSS 中的 :first-child Selector 可以选择到特定元素的第一组物件(同一个 parent)HTMLXML/HTML Code复制内容到剪贴板123123CSSCSS Code复制内容到剪贴板//只套用编号1的lili:first-child{color:green;}first-child和:first-of-child的区别假如我们有这样的一段HTML代码：XML...
css选择器
m0_46966817的博客
12-10 1529
CSS选择器
css匹配选择属于其父元素的第N个子元素的方法
12-10
`nth-child(n)`是一个强大的选择器，它允许我们选择属于其父元素的第N个子元素。这个功能在设计复杂的网页布局时非常有用，因为它可以精确地定位到我们想要操作的元素。 在提供的例子中，`<style type="text/css"> ...
css 获取从第n个开始之后的所有元素
09-22
这个选择器可以让你选择父元素下的第n个指定类型的子元素。当我们想获取从某个特定顺序之后的所有同类型元素时，`nth-of-type(n+x)` 就变得非常有用。这里的x表示从哪里开始计数，n表示计数的起点，x是一个正整数，...
CSS中的几个伪元素使用介绍
09-25
总结一下，CSS伪元素`::before`和`::after`提供了在元素内容前后添加额外内容的灵活性，而`::first-child`则允许我们对元素集合中的第一个元素应用特定样式。这些工具在页面布局和美化时非常有用，尤其是在需要批量...
有关 :first-child的理解
热门推荐
师兄阿离的博客
10-29 2万+
最近在做项目，突然发现一个选择器非常特别，所以特意去了解了一下，下面把我自己所理解的意思写下来。 在W3School里面讲   ：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 我刚一看这个我也是看的迷迷糊糊，这讲的是什么意思，我把他理解成是他的第一个元素。然后就傻傻的的去测试，也不知道自己弄什么。然后出现了一些错误，下面我就一一例举有关：first-child的内...
在 JavaScript 中提取元素的第一个子元素
迹忆客
06-21 1986
Element.children 和 Node.childNodes 之间的唯一区别是 Element.children 仅包含元素节点，而 Node.childNodes 获取所有子节点，包括非元素节点，如文本和注释。Node.firstChild 返回树中节点的第一个子节点，如果节点没有子节点则返回 null。返回指定元素的子节点的活动 NodeList，索引 0 分配给第一个子节点。它返回一个包含节点子节点的活动 NodeList。HTML 集合是节点的 DOM 元素子元素的活动的、有序的集合。
【CSS】结构伪类选择器
德仔
06-20 1630
结构伪类选择器 上图中，我们很清楚的看到了那些属于同级，first-of-type 是要找到同级的第一个，所以 div1、div2、div5 是符合要求的，所以“456” “ 789”’ “唯一的”会发生样式变化。 解析：如上代码中，我们给 p 标签和 div 标签都设置了 only-of-type，但是只有 p 标签的起作用了。为什么？因为上述代码中存在多个 div。所以这个选择选择器一定要注意唯一性。...
css3选择器如何选择同一个父级下的相同class的第一个元素 nth-child nth-of-type
真爱一生的博客
06-28 8364
1 2 3 4 5 选择第一个类名： .demo .item: nth-of-type(1) { … } || .demo .item: nth-child(1) { … }; 选择最后一个类名： .demo .item: last-child { … }; 选择其中一个指定的类名：.demo .item: nth-of-type(x) { … } || .demo .item: nth-child(x) { … }; 那么nth-of-type与nth-child 什么区别呢 :n...
CSS后代选择器和子元素选择器
laomu1988的专栏
01-10 748
后代元素：该节点所有的内部节点，CSS例如 h1 strong{color:#0F0;} 子元素：该节点的第一层内部节点，CSS例如 h1 > strong {color:red;}  (IE6不支持！) 两种选择器具有相同的优先级，即哪一个放在后面的就其作用 h1 strong{color:#0F0;} h1 > strong {color:red;} This is ve
firstChild和firstElementChild的区别
learner_boy的博客
05-15 3837
firstChild可以获取文本元素而firstElemenChild不能 . 它们的共同点都是获取父节点下第一个节点对象。 .但是firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。
html css 选择父亲,css选中父元素下的第一个子元素(:first-child)
weixin_39576104的博客
06-03 3758
前言最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？好像很好用，平时使用中也没有遇到什么问题，理所当然的就以为它只会选中父元素下的第一个元素，对孙元素和曾孙元素没有影响。事实证明，我的理所当然是错的。E:first-child的第一个误区(只会选中我规定的区域中的一个，不会遍历其下有多少个孙或曾孙元素)body p:first-child{backgr...
css伪元素画一个菱型
01-20
CSS伪元素可以用来在元素的内容之前或之后插入额外的内容，并且可以通过设置其样式来实现各种效果。要画一个菱形，可以使用CSS伪元素的`::before`和`::after`来创建两个三角形，并通过旋转和定位来组合成菱形。 下面是一个使用CSS伪元素画一个菱形的示例： ```css .diamond { position: relative; width: 100px; height: 100px; } .diamond::before, .diamond::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border: 50px solid transparent; } .diamond::before { border-bottom-color: red; border-top: none; transform: rotate(45deg); } .diamond::after { border-top-color: red; border-bottom: none; transform: rotate(-45deg); } ``` 在上面的示例中，我们创建了一个名为`.diamond`的元素，并使用`::before`和`::after`伪元素来创建两个三角形。通过设置`border`属性的宽度和颜色，我们可以控制三角形的形状和颜色。通过设置`transform`属性的`rotate`值，我们可以旋转三角形。最后，通过设置`position`属性和`top`、`left`属性来定位三角形。 你可以将上面的CSS代码应用到一个HTML元素上，例如一个`<div>`元素，并为该元素添加`.diamond`类名，就可以看到一个菱形的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值