有关 :first-child的理解

2024-06-25 17:05:46

最近在做项目，突然发现一个选择器非常特别，所以特意去了解了一下，下面把我自己所理解的意思写下来。

在W3School里面讲 ：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。

我刚一看这个我也是看的迷迷糊糊，这讲的是什么意思，我把他理解成是他的第一个元素。然后就傻傻的的去测试，也不知道自己弄什么。然后出现了一些错误，下面我就一一例举有关：first-child的内容出来。

例子来了。

例如：a：first-child {color：yellow;}意思是在父类里面的第一个元素a颜色都是黄

问题1

<style type =“text / css”>

a：第一个孩子{color：yellow;}

</样式>

</ head>
<body>

/ *在这里a是他父类p的第一个元素，所以字体颜色改变* /
<p>

<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</ p>
/ *在这里a是他父类div的第一个元素，所以字体颜色改变* /
<div>

<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</ div>

</ BODY>

问题2

<style type =“text / css”>

div：first-child {color：red;} / * 由于div不是父类body的第一个元素所以他的样式没有显示出来 * /

</ style>
</ head>
<body>

/ * p：我才是身体的第一个元素* /
<p>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</ p>
<div>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</ div >

</ BODY>

例如：p> a：first-child span {color：yellow;}意思是父类p第一个a元素里面的所有span元素都改变样式

<style type =“text / css”>

p> a：first-child span {color：yellow;} / *父类p第一个a元素里面的所有span元素都改变样式* /

</style>
</head>
<body>
<p>
<a>测试1<span>一个链接</span>测试11<span>一个链接二</span></a></br>
<a>测试2<span>一个链接</span>测试22<span>一个链接二二</span></a></br>
<a>测试3<span>一个链接</span>测试33<span>一个链接二二二</span></a></br>
<a>测试4<span>一个链接</span>测试44<span>一个链接二二二二</span></a></br>
</p>

<div>
<a>测试1 <span>一个链接</ span>测试11 <span>一个链接二</ br> </a> </ br>
<a>测试2 <span>一个链接</ span >测试22 <span>一个链接二二</ br> </a> </ br>
<a>测试3 <span>一个链接</ span>测试33 <span>一个链接二二二</ span> </a> </ br>
<a>测试4 <span>一个链接</ span>测试44 <span>一个链接二二二二</ br> </a> </ br>
</ div>

</ BODY>

上面是我对于：first-child的理解，欢迎大家一起讨论和学习。

有关 :first-child的理解相关推荐

《深入理解JAVA虚拟机》详细解读（第二章）：JAVA内存区域与内存溢出异常
目录一.JAVA内存区域与内存溢出异常 1. 概述 2. 运行时数据区域 2.1 程序计数器 2.2 Java虚拟机栈 2.3本地方法栈 2.4 堆 2.5 方法区 2.6 运行时常量池 2.7直接 ...
Java内存溢出(OOM)异常完全指南
原文:http://luecsc.blog.51cto.com/2219432/1948800 这也许是目前最为完整的Java OOM异常的解决指南. 1.Java.lang.OutOfMemoryE ...
从源码角度理解LinearLayout#onMeasure对child的measure调用次数
熟悉绘制流程的都知道,ViewGroup可以决定child的绘制时机以及调用次数. 今天我们就从LinearLayout开始学起,看一下它对子View的onMeasure调用次数具体是多少. 简单起见 ...
从源码角度理解FrameLayout#onMeasure对child的measure调用次数
熟悉绘制流程的都知道,ViewGroup可以决定child的绘制时机以及调用次数. 今天我们就从最简单的FrameLayout开始学起,看一下它对子View的onMeasure调用次数具体是多少. 简 ...
从源码角度理解ConstraintLayout#onMeasure对child的measure调用次数
熟悉绘制流程的都知道,ViewGroup可以决定child的绘制时机以及调用次数. 今天我们简单看下较为复杂的ConstraintLayout,看一下它对子View的onMeasure调用次数具体是多 ...
MindSpore技术理解（下）
MindSpore技术理解(下) 4 GraphEngine 由于深度学习算法需要进行大量的计算,很多公司都设计了自己的深度学习专用处理器(如谷歌的张量处理器.阿里巴巴的含光等),华为也发布了自主设计 ...
linux fork 目录,linux fork()理解
各位同学,转换下思维,这里说的是"进程", 不是"线程",OK,我们开始 "进程"二字似乎总有那么些"只可意会不可言传" ...
android 点击事件消费,Android View事件分发和消费源码简单理解
Android View事件分发和消费源码简单理解前言: 开发过程中觉得View事件这块是特别烧脑的,看了好久,才自认为看明白.中间上网查了下singwhatiwanna粉丝的读书笔记,有种茅塞顿开 ...
js 对象深拷贝_这一次，彻底理解JavaScript深拷贝
导语这一次,通过本文彻底理解JavaScript深拷贝! 阅读本文前可以先思考三个问题: JS世界里,数据是如何存储的? 深拷贝和浅拷贝的区别是什么? 如何写出一个真正合格的深拷贝? 本文会一步步解 ...
react 返回一个页面_Fiber 内部: 深入理解 React 的新 reconciliation 算法
最近在看 React, 发现一篇深度好文, 忍不住就翻译了. React 是一个用于构建用户界面的库, 它的核心是跟踪组件状态变化并将它们更新到页面上. 在 React 中, 我们称这个过程为 rec ...

最新文章

热门文章