【CSS3未完】选择器--慕课网【学习总结】
2016-03-23 21:40
603 查看
1.属性选择器
CSS3新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> css代码: a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }
①first-child选择器
选择父元素的第一个子元素的元素。
②last-child选择器
“:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。
③nth-child(n)
用来定位某个父元素的一个或多个特定的子元素(顺序)。
其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。【经验与技巧】
当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。如下表所示:④nth-last-child(n)
从某父元素的最后一个子元素(逆序)开始计算,来选择特定的元素。与前面的“:nth-child(n)”选择器非常的相似。
⑤first-of-type选择器
父元素下的某个类型的第一个子元素。
⑥last-of-type选择器
父元素下的某个类型的最后一个子元素。
⑦nth-of-type(n)选择器
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素(顺序)。
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词。⑧nth-last-of-type(n)选择器
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始(逆序),而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。
相关文章推荐
- 3月23.CSS表格布局
- 【CSS】前端笔试题总结
- 第一章:CSS简介和基本语法
- 目前最全的浏览器/CSS选择器兼容性总结(2009-8-10更新)
- CSS--盒子模型详解
- Xamarin devexpress datagrid 样式
- Css3之高级-8 Css优化(概述、原则、代码优化)
- Css3之高级-7 Css动画(概述、关键帧、动画属性)
- 2.CSS基础-选择器
- css中hover伪类的bug
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式
- lesscss的使用
- Css3之高级-6 Css过渡(概述、过度子属性)
- css 遇到的一些问题
- 1.CSS基础—介绍及语法
- Css3之高级-5 Css转换(简介、2D转换、3D转换)
- FontAwesome 4.4.0 中完整的585个图标样式CSS参考
- 通过css控制HTML文本框中的文字垂直居中
- 合成CSS图片
- 【CSS笔记】关于css的各种新旧选择器和伪类和伪元素