关闭

CSS3的nth-child() 和nth-of-type()选择器,表格奇偶行变色

56人阅读 评论(0) 收藏 举报

nth-child()选择匹配其父元素,不论其类型。

nth-of-type()选择匹配其 父元素,区分类型。

例如

p:nth-of-type(2)
{
background:#ff0000;
}

<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

</body>
p:nth-of-type(2)
是第二个段落变成红色

p:nth-child(2)
是第一个锻炼变成红色


奇偶数匹配

odd代表奇数,even代表偶数


倍数写法

:nth-child(2n+1), :nth-child(2n-3) , :nth-child(4n+3),可以这样写。n为自然数


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4395次
    • 积分:64
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档