美文网首页
CSS3的:nth选择器

CSS3的:nth选择器

作者: 淡淡紫色 | 来源:发表于2018-10-12 14:53 被阅读0次

给没有使用过人的说明:

①带括号的,里面放其参数,参数是其编号,参数可以是表达式;

②第一个元素的编号是1;

③如果参数是n,表示n是可变的,n值是正整数再加上0,所有符合的都会被应用;

例如:

:nth-child(n)表示所有子节点(0~正无穷);

:nth-child(2n+1)表示编号为奇数的子节点(1,3,5,7……);

:nth-child(3n+1)表示编号为1,4,7,10……的子节点

:first-child
选择某个元素的第一个子元素;

:last-child
选择某个元素的最后一个子元素;

:nth-child()
选择某个元素的一个或多个特定的子元素;

:nth-last-child()
选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

:nth-of-type()
选择指定的元素;

:nth-last-of-type()
选择指定的元素,从元素的最后一个开始计算;

:first-of-type
选择一个上级元素下的第一个同类子元素;

:last-of-type
选择一个上级元素的最后一个同类子元素;

:only-child
选择的元素是它的父元素的唯一一个了元素;

:only-of-type
选择一个元素是它的上级元素的唯一一个相同类型的子元素;

:empty
选择的元素里面没有任何内容。

相关文章

网友评论

      本文标题:CSS3的:nth选择器

      本文链接:https://www.haomeiwen.com/subject/zohgaftx.html