发现问题 今天工作才发现的,原来我一直就理解错了!! MDN官网对这个选择器的的定义是: :nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 /* 在每组兄弟元素中选择第四个 元素 */ p:nth-of-type(4n) { co
MDN上的概念: 某个元素:nth-of-type(n)这个CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 某个元素:nth-child(n)这个CSS 伪类首先找到所有当前元素的兄弟元素,, 用 n 来筛选出在当前元素的兄弟元素节点的位置。 我们可以注意到:nth-of-type他是当前元素的兄弟元素的第n个,...
MDN上的概念: 某个元素:nth-of-type(n)这个CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 某个元素:nth-child(n)这个CSS 伪类首先找到所有当前元素的兄弟元素,, 用 n 来筛选出在当前元素的兄弟元素节点的位置。 我们可以注意到:nth-of-type他是当前元素的兄弟元素的第n个,...
目前css2和css3css类似的选择器确实只支持元素标签,不支持类名ID,据了解css4会增加一个ntn-match(),会支持上述的类名ID选择兄弟节点的功能。 参考文献 MDN:nth-of-type :nth-of-type()不起作用
MDN上的概念: 某个元素:nth-of-type(n)这个CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 某个元素:nth-child(n)这个CSS 伪类首先找到所有当前元素的兄弟元素,, 用 n 来筛选出在当前元素的兄弟元素节点...
MDN上的概念: 某个元素:nth-of-type(n)这个CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 某个元素:nth-child(n)这个CSS 伪类首先找到所有当前元素的兄弟元素,, 用 n 来筛选出在当前元素的兄弟元素节点的位置。
因为是 ntf-of-type 的值是匹配第 2 个元素的,可以看 MDN 上 nth-of-child 的解释,是一样的:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child 有用 回复 cesiya23: :nth-of-type(i)是找到父元素中第i个符合条件的元素;:nth-of-child(i)是找到父元素中符合条件的第i个子元素;那么...
今天学习了css选择器,发现有两个伪类nth-of-type和nth-child在功能上十分相似,却又有不同的地方。但我发现无论是在MDN上,还是在w3school、菜鸟教程上,对这两个伪类选择器的对比说的都不是很明白。这篇文章就是对这两个伪类的简单探究~ nth-of-type和nth-child的区别 ...
深入理解nth-of-type与nth-child的差异，对于前端开发者来说至关重要。这两个伪类经常被混淆，但实际上它们在选择元素的逻辑上有着显著的区别。根据MDN文档的定义，某个元素:nth-of-type(n) 是针对一组具有兄弟节点的标签，用于筛选出该组兄弟节点中的第n个元素。与此相对，某个元素:nth-child(n)...
揭秘CSS 伪类(:nth-child vs. :nth-of-type) 使用css选择器将样式应用于网页;选择器使您可以定位特定元素或元素集。通常,当您开始使用 CSS 时,您会先使用元素选择器,然后再使用类和 ID。 尽管这些选择器非常强大,但它们可能会受到很大限制,从而无法根据状态选择元素。如果您曾经使用过react和vue等前端框架,您...