:nth-child(n)与:nth-of-type(n)为啥显示不对呢

首先是二者的区别

:nth-child(n) 是选择父元素的第n个子元素。
:nth-of-type(n) 是选择父元素的第n个同类型的子元素

举个例子：

<div class="read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!-- 设为红色 -->
</div>

/* nth-child */
.read p:nth-child(3) {color: red;
}

结果：

/* nth-of-type */
.read p:nth-of-type(2) {color: red;
}

结果同上图；

.read p:nth-child(2) 选择的是父元素.read第2个子元素，且是p元素。（先找第2个，再找是不是p）
.read p:nth-of-type(2) 则是选择父元素.read第2个为p的子元素。（先找p，再找第2个）

重点就在.read是其父元素，且父元素类是怎么构成的。

其他就不多举例BB了，这方面出现问题不符合预期，就重点关注伪类元素的父元素！

:nth-child(n)与:nth-of-type(n)为啥显示不对呢相关推荐

nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
H5 input type=“search“ 不显示搜索解决方法
H5 input type="search" 不显示搜索解决方法参考文章: (1)H5 input type="search" 不显示搜索解决方法 (2) ...
css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
解决input[type=number]无法显示非数字字符的问题
在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘.但另外的一个问题是,inpu ...
打印系统开发(63)——C# 实现虚拟打印机 HP Color LaserJet 4500 （2） True Type Font字体显示
本来打算酸所有的PCL HPGL/2的都贴出来.后来发现这里重要的字体显示 TTF的数据显示就2000多行 10来个类了.所以把这个独立出来.另外我增加了一些字符对应和轮廓显示的方法.有兴趣的朋友可以 ...
C# 实现虚拟打印机 HP Color LaserJet 4500 （2） True Type Font字体显示
最近项目太多.关注这个的兄弟对不住了. 本来打算酸所有的PCL HPGL/2的都贴出来.后来发现这里重要的字体显示 TTF的数据显示就2000多行 10来个类了.所以把这个独立出来.另外我增加了一些字 ...
设置input[type=number]不显示箭头
input[type=number] {&::-webkit-outer-spin-button,&::-webkit-inner-spin-button {-webkit-appea ...
【elementUI样式优化】之el-input输入数字类型 type=‘number‘ 不显示右侧上下箭头 == 修改箭头右边距
先完成再完美,完成永远比完美重要. 使用element UI的el-input设置属性为type="number"时,样式很不好看如果接受有上下箭头==>需要修改el-in ...
input 没显示 html,html - 为什么我的input type =“submit”没有显示？
Closed. This question is off-topic. It is not currently accepting answers. Learn more. 想改进这个问题吗?Upda ...
Go 学习笔记（27）— type 关键字（类型定义、类型别名、类型查询、定义接口、定义结构体）
1. 类型别名定义定义类型别名的写法为: type TypeAlias = Type 类型别名规定: TypeAlias 只是 Type 的别名,本质上 TypeAlias 与 Type 是同一个类 ...

:nth-child(n)与:nth-of-type(n)为啥显示不对呢

首先是二者的区别

重点就在.read是其父元素，且父元素类是怎么构成的。

:nth-child(n)与:nth-of-type(n)为啥显示不对呢相关推荐

最新文章

热门文章