1.first-child 选择列表中的第一个标签 li:first-child{color:red} 2. last-child 选择列表中的最后一个标签 li:last-child{color:pink} 3.nth-child(n) 这里的n为数字,表示选择列表中的第n个标签 例如选择第三个标签 li:nth-child(3){color:pink} 4.nth-child(2n) 选择列表中的偶数,选中 2、4、6...
first-child表示选择列表中的第一个标签。代码如下:li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。2、last-child last-child表示选择列表中的最后一个标签,代码如下:li:last-child{background:#090} 3、nth-child(3)表示选择列表中的第3个标签,代码如下:li:nth-c...
1、first-child first-child表示选择列表中的第一个标签。代码如下: li:first-child{background:#090} 上面的意思是,li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签,代码如下: li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签,...
“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似,只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,从某父元素的最后一个子元素开始计算,来选择特定的元素。 (五)first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器,不同之处...
当你在CSS中运用first-child或last-child结构伪类时,可能会遇到它们不生效的情况。这是因为这些选择器的生效条件基于元素在HTML结构中的位置,例如,div p:last-child实际上要求div的最后一个直接子元素是p标签,但实际的HTML结构中,元素的排列可能混乱,不一定是按此顺序。解决这个问题有两种途径:首先...
当时实际使用中还是需要 div 前后的元素,此时把 first-child 和 last-child 分别改成 first-of-type 和 last-of-type 即可,样式都正常生效。first-child :指的是父元素的第一个元素,在上面的例子中,要实现样式的话需要保证 class 为 userinfo-item 的 div 元素没有兄弟元素,或者在创建一个...
1. first-child(IE7兼容)、last-child(IE8不兼容) 2.nth-child、nth-last-child (IE8不兼容) 3. 对奇数、偶数使用样式 4. nth-of-type(IE8不兼容):只针对同类型的元素进行计算 5. 循环使用样式 li:nth-child(4n+1) 1. first-child(IE7兼容)、last-child(IE8不兼容) ...
这是css3选择器,意思是选择同级的第一个、最后一个,类似的还有"nth-child"。使用这些选择器可以轻松替代原来需要js实现的样式设置,给指定的html元素设置样式。
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。 :last-child 选择器匹配属于其父元素的最后一个子元素。 :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素。 :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素。
这是css3中新增的选择器,意思分别是最后一个子元素和第一个子元素,不过使用的时候,考虑一下随之引起的兼容性问题。