CSS3选择器的详细解释:nth-child和n型之间的差异

CSS3选择器的详细解释:nth-child和n型之间的差异
请看一个简单的示例,首先是HTML部分:
我是第一个P标签
我是第二个P标签
然后两个选择器的相应CSS代码如下所示:
p:n个子(2){颜色:红色;}
p:n类型(2){颜色:红色;}
在这个例子中,两个选择器的效果是一致的,第二个p标记的文本变成红色:
虽然以上两个演示的最终结果是一致的,但是两个选择器之间有区别

因为:在简单的白话中,n个子选择器意味着选择一个元素:

1。这是一个段落元素

2。这是父标签的第二个子元素。

对于:类型选择器的第n个,这意味着选择一个元素:

1、选择父标签的Lazi第二元素

通过对上述示例稍加修改,我们可以看到两个选择器之间的区别,如下所示:HTML代码:
我是普通的div标签
我是第一个P标签
我是第二个P标签
或与上述示例一致的CSS测试代码:
p:n个子(2){颜色:红色;}

p:n类型(2){颜色:红色;}
此时两个选择器呈现的结果是不同的。

P:nth-child(2)其渲染的结果不是第二P标签文本脸红了,但第一个标签,这是父标签的第二个孩子。

P:n型(2)看起来很强壮,也染红了二P标签,他们想渲染。

以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部