CSS选择器 first-child 、first-of-type 和 nth-of-type()
2016-12-11 21:43
337 查看
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中,必须声明
first-child:选择器用于选取属于其父元素的首个子元素的指定选择器
first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素
nth-of-type(x):选择器匹配属于其父元素的特定类型的第x个子元素的每个元素
code1:first-child
body和第一个div中的首个p有效,第二个p和第三个span无效,因为p是首个子元素
第二个div中的span有效,p无效,因为span是首个子元素。
结论:该选择器是以块内区域划分的,块内区域的所有子块区域的的子元素也会生效,但是必须是首个子元素才有效。
code2:first-of-type
body和两个div中的第一个p和第一个span均生效,因为p或span为所有为p或span的子元素中的第一个
结论:该选择器也是以块区域划分的,所有子块均有效,只需要是同类标签中首个元素即可。
code3:nth-of-type(1)和first-of-type效果相同,一般常用于table单双行样式中
<!DOCTYPE>。
first-child:选择器用于选取属于其父元素的首个子元素的指定选择器
first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素
nth-of-type(x):选择器匹配属于其父元素的特定类型的第x个子元素的每个元素
code1:first-child
body和第一个div中的首个p有效,第二个p和第三个span无效,因为p是首个子元素
第二个div中的span有效,p无效,因为span是首个子元素。
结论:该选择器是以块内区域划分的,块内区域的所有子块区域的的子元素也会生效,但是必须是首个子元素才有效。
<!DOCTYPE html> <html> <head> <style> p:first-child { background-color:yellow; } span:first-child { background-color:yellow; } </style> </head> <body> <p>这个段落是其父元素(body)的首个子元素。</p> <p>这个段落是其父元素(body)的第二个个子元素。</p> <span>这个span是其父元素的第三个个子元素。</span> <div> <p>这个段落是其父元素(div)的首个子元素。</p> <p>这个段落是其父元素(div)的第二个个子元素。</p> </div> <div> <span>这个段落是其父元素(div)的首个子元素。</span> <p>这个段落是其父元素(div)的第二个子元素。</p> </div> </body> </html>
code2:first-of-type
body和两个div中的第一个p和第一个span均生效,因为p或span为所有为p或span的子元素中的第一个
结论:该选择器也是以块区域划分的,所有子块均有效,只需要是同类标签中首个元素即可。
p:first-of-type { background-color:yellow; } span:first-of-type { background-color:yellow; }
code3:nth-of-type(1)和first-of-type效果相同,一般常用于table单双行样式中
p:nth-of-type(1) { background-color:yellow; } span:nth-of-type(1) { background-color:yellow; }
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- div 2 列 50%宽度布局