:nth-last-of-type(n)和:nth-last-child(n) 与:nth-of-type(n)和:nth-child(n)基本一致,只是从后面开始计数 结合:nth-last-child(n)与:first-child可以匹配出列表中不同元素数量的不同样式 比如:nth-last-child(3):first-child表示从后往前数选中第3个子元素,同时也是第一个元素,那么就可以判断改列表...
与:nth-of-type(n)和:nth-child(n)基本一致,只是从后面开始计数 结合:nth-last-child(n)与:first-child可以匹配出列表中不同元素数量的不同样式 比如:nth-last-child(3):first-child表示从后往前数选中第3个子元素,同时也是第一个元素,那么就可以判断改列表中共有3个元素,结合兄弟选择器+和~可以对不同数...
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧 :nth-child(2){ color: red } 选中第2个元素 image.png 然后是nth-of-type :nth-of-type(2){ color:...
只有first-of-type下面就说说first-child与first-of-type的区别：first-child：父元素的第一个子元素且...
一、 :x-child选择器 重点在于 child 子元素,按照子元素顺序选择。 图片预览 1. :first-child 匹配同时满足以下两个条件的元素标签: ①是div元素的第一个子元素; ② 该子元素是 p 元素。 div p:first-child { background-color:y
一、nth-child 和 nth-of-type 选择第几个元素可以想到nth-child和nth-of-type。 这两个的区别是,nth-child代表的是第几个子元素,而nth-of-type代表的是该标签类型的第几个元素。 直接看例子吧。 复制 :nth-child(2){color:red} 1. 2. ...
下面就说说first-child与first-of-type的区别：first-child：父元素的第一个子元素且必须符合指定类型 first-of-type：父元素的符合指定类型的第一个子元素 当然，光看文字也是很难理解的，下面看看例子： 第1行 第2行 第3行 这种情况下，不管是p:first-of-type还是p:first-child，第1行都会被...
下面就说说first-child与first-of-type的区别：first-child：父元素的第一个子元素且必须符合指定类型 f...
上面这个例子,.demo li:nth-child(2)选择的是one节点,而.demo li:nth-of-type(2)则选择的是two节点。 .demo li:nth-child(2)的选择过程分析: :nth-child(2)以选择数字优先,它先找到了父类 .demo ,然后再查找父类.demo的第二个子元素,先判断这个子元素是否为li,如果是则选择,非则选择失败。 .demo...
介绍一下常用的css3结构伪类选择器,nth-child、nth-last-child 、 nth-of-type、nth-last-of-type、 first-child 、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。