请看一个简单的示例,首先是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标签,他们想渲染。
以上是本文的全部内容,希望能对您有所帮助,希望大家多多
支持。