nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素,后者是查找同类型元素中某个绝对位置的元素。相同之处是,两者都是找到元素之后再与前面的选择符进行匹配,这里的匹配方式是一样的。 稍微往下延伸,清楚了查找方式,那么不管前面的选择符怎么变,最后都是先查找到元素再与前面的选择符进行匹配。也
:nth-of-type :nth-child 说明:.type:nth-child(1)匹配的是type的父元素的子元素中第一个子元素且class是type的h1元素,.type:nth-of-type(1)匹配的是type的父元素的子元素中h1和p元素的第一个class是type的元素,即0和1。 总结: classA:nth-of-type(n) 匹配的是父元素的子元素中,每种类型的元素节点...
nth-of-type,nth-last-of-type,可以分别从前到后和从后到前选一组,而first-of-type和last-of-type则只能选第一个和最后一个。相对于第一组,它们的区别在于: p :nth-of-type(1) p:nth-of-type(1) 前者会选择所有第一次出现的不同子元素的第一个。比如有10个子元素,其中a3个,span2个,p3个,div一...
我之前写的是li a:nth-of-type(1)这个形式，这是不合理的，最终导致5个的文本背景都是设置为li a...
从什么时候起我们开始厌恶数学?这些东西原本如此美丽，如此精妙。这个地球上有多少伟大的智慧曾耗尽一生，...
nth-of-type为什么要叫:nth-of-type?因为它是以”type”(类型)来区分的; nth-of-type(n)是指父元素下第n个ele元素 nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。 例子如下所示: ppppppp ppppppp 111111 222222 333333 ...
:nth-child和:nth-of-type都是css3的结构伪类选择器,和他们相关的还有一堆其他的结构伪类选择器,如果搞懂了这两个选择器的话,相应的也能搞懂和他们相关的其他结构伪类选择器啦。 这两个选择器,可不像我们看起来的那么简单,他们的作用相近,却又不完全一样。
ul a:nth-of-type(1){ background:blue;/*所有a标签的背景都变成了蓝色???*/ } Hipster Fashion Haircut CloudComputing Services My haire is sooo fantastic! Eat Healthy Lips so kissable I could die... Emily梦 浏览3615回答3 3回答 西兰花伟大炮 我晓得这个问题所在了,我也复习了一次,这是选择a...
p:nth-of-type(2)的效果是选择出了第二个p标签，也就是.box里的第三个子元素。翻译下：1.确定了选择的是.box元素里面的p元素。2.选择的是.box的子元素里面àp元素à的父元素里面的à第二个p元素。3.我们来分析下第二点到底是什么意思：”.box的子元素里面àp元素”指的是这两个元素：...