first-child、last-child、nth-child( )失效问题

最经遇到一个first-child、last-child、nth-child()失效的问题，我相信还有很多人都会遇到，下面我就分2类来简单的说明下

①first-child和last-child失效

第一种情况是first-child和last-child问题，话不多说先贴代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><style type="text/css" media="screen">.box p:first-child {color: pink;}.box p:last-child {color: pink;}</style>
</head>
<body><div class="box"><h1>测试</h1><p>JAVA</p><p>C语言</p><p>.net</p><p>c#</p><h1>测试</h1></div>
</body>
</html>

代码运行的结果如下图，可以看到first-child和last-child处于失效的状态

分析原因是因为，在使用first-child时，所获取的元素前面不能有兄弟节点，同理使用

last-child时所获取的元素后面不能有兄弟节点。

我们可以看看我删除前后2个h1标签的效果

可以看到first-child和last-child可以正常使用。

②nth-child( )失效

大家都知道nth-child( )属性的index是从1开始的

nth-child( )失效其实和上面差不多，一样我先贴代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><style type="text/css" media="screen">.box p:nth-child(1) {color: pink;}</style>
</head>
<body><div class="box"><h1>测试</h1><p>JAVA</p><p>C语言</p><p>.net</p><p>c#</p><h1>测试</h1></div>
</body>
</html>

代码运行结果如图，这里我是想将JAVA的颜色变成粉红色。

可以看到没有实现我们想要得结果，原因就是索引会因为所获取的元素前面的兄弟节

点而累加，所以如果我们想要JAVA的颜色变成粉红色，我们需要把index设置为2

可以看到修改索引后，效果效果正常实现。

first-child、last-child、nth-child( )失效问题相关推荐

nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
在verp设置parent和child关系时，child object没有随着parent object变化的情况
在verp中发现,设置parent和child关系时,child object没有随着parent object变化的情况: pickTarget=sim.getObjectHandle('pickT ...
css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
android 自定义 child,Android自定义View
前言 Android自定义View的详细步骤是我们每一个Android开发人员都必须掌握的技能,因为在开发中总会遇到自定义View的需求.为了提高自己的技术水平,自己就系统的去研究了一下,在这里写下一 ...
Codeforces Round #250 (Div. 2)—A. The Child and Homework
好题啊,被HACK了.曾经做题都是人数越来越多.这次比赛 PASS人数从2000直掉 1000人被HACK 1000多人! ! ! ! 没见过的科技啊 1 2 4 8 这组数被黑的 ...
int pthread_atfork(void (*prepare)(void), void (*parent)(void), void (*child)(void))；
/*** pthread_atfork 示例程序* * 作者:rtoax* 日期:2020年11月18日*/ #include <stdio.h> #include <stdlib. ...
最里层的是child元素
1. 简介 A convenience widget that combines common painting, positioning, and sizing widgets. Container ...
vue createElement后删除这个元素 the node to be removed is not a child of this node
项目场景: 描述:做的项目需要生成一行script标签后使用完再删除这个标签,以保持文件的简洁例如:再一个html里的生产一个script标签,使用完成后再删除这个script标签问题描述: 提示 ...
《Introducing the Child Process Debugging Power Tool》学习
学习资料:<Introducing the Child Process Debugging Power Tool> 学习进度 2021.6.25 下午,Ongoing 2021.6.25 ...
C++ Parent和Child继承分析
继续分析 1.继承实例分析 2.class Parent 1.继承实例分析 #include <iostream> #include <stdio.h> #include &l ...

first-child、last-child、nth-child( )失效问题

①first-child和last-child失效

②nth-child( )失效

first-child、last-child、nth-child( )失效问题相关推荐

最新文章

热门文章