关闭

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

81人阅读 评论(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网站的观点或立场

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

css table tr
  • u012132129
  • u012132129
  • 2015-11-03 13:56
  • 10123

解决IE8下CSS3选择器 :nth-child() 不兼容的问题

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • FrontEnder_way
  • FrontEnder_way
  • 2016-05-09 17:43
  • 16842

css3的nth-child选择器的详细探讨

css3的nth-child选择器的详细探讨css3的nth-child选择器的详细探讨 前言 有哪些 nth-child nth-child研究开始 构建DOM结构 开始实践CSS代码为方便研究我...
  • FungLeo
  • FungLeo
  • 2016-03-06 16:16
  • 8728

奇偶行显示不同样式操作,CSS3 :nth-child()伪类选择器

原文地址:http://blog.phpok.com/archives/202/ css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支...
  • l863784757
  • l863784757
  • 2013-11-04 16:22
  • 2602

CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式

css3的强大,让人惊叹,今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式,具体的详细示例可以参考下文,希望对大家有所帮助css3的强大,让人惊叹,人...
  • forest_fire
  • forest_fire
  • 2016-03-21 11:18
  • 255

CSS3选择器:nth-child和:nth-of-type之间的差异

:nth-child和:nth-of-type 比较相似,但是两者区别还是比较大的。
  • huang_xiao_wei
  • huang_xiao_wei
  • 2016-11-30 19:57
  • 190

CSS3伪类选择器nth-child和nth-of-type浅析

1. nth-child定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 n 个子元素,不论元素的类型。n 可以是数字、关键词或公式。① n为数字时,n为大于0的整数.box :n...
  • perhapschen
  • perhapschen
  • 2016-05-19 19:36
  • 663

CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child

Table表格奇偶数行定义样式: CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年,但是目...
  • jinkingliao
  • jinkingliao
  • 2015-11-20 11:55
  • 556

css3-属性、伪类、nth-child选择器

/* 伪类: :link :hover :active :visited 伪类的特点:以 :开头 */ .box{ ...
  • gyq04551
  • gyq04551
  • 2016-11-21 20:32
  • 206

【CSS3】结构性伪类选择器—nth-child(n)

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)...
  • happyhaojie
  • happyhaojie
  • 2016-02-23 16:22
  • 321
    个人资料
    • 访问:5210次
    • 积分:73
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档