好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css3nth属性使用

CSS3中的nth属性可以根据元素在其父元素中的位置进行选择。

nth有两个关键字:nth-child和nth-of-type。

nth-child表示选择该元素在其父元素中的位置,无论它是什么类型的元素。

p:nth-child(3) {
color: red;
}

上面的例子将会变成第三个子元素的段落文本变成红色,无论这个元素是什么类型的。

而nth-of-type则是选择特定类型的元素在其父元素中的位置。

p:nth-of-type(3) {
color: red;
}

这个例子只会选择第三个段落文本来变成红色,无论在这些子元素中是否存在其他类型的元素。

可以在nth中使用具体的数字,也可以使用关键词odd和even来选择奇数和偶数元素。

p:nth-child(odd) {
background-color: grey;
}
p:nth-of-type(even) {
background-color: grey;
}

上面的代码将会选择父元素中的奇数子元素和段落元素中的偶数位置,并将背景颜色设置为灰色。

查看更多关于css3nth属性使用的详细内容...

  阅读:55次