总结CSS3新特性(选择器篇)
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行;
~:
p ~ p {
color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/
}
[attribute^=value]:
选择该属性以特定值开头的元素
[attribute$=value]:
选择该属性以特定值结尾的元素
[attribute*=value]:
选择该属性中出现了特定值的元素
上边三个是可以组合使用的,方法如 ↓ :
实际中可以应用在区分本地链接与外部链接,通过判断是否有http\.com什么的(等到CSS4选择器问世就不用这么麻烦了[:local-link])
:first-of-type与:last-of-type:
从字面大概能看出来是干嘛使得,第一个这个类型的/最后一个这个类型的...
如上图所示,每个元素内的第一个p与最后一个p都应用了该样式;
:only-of-type:
选择仅仅仅有一个此类型的子元素,不包含子元素的子元素;
可以利用:not来实现反选
:only-child:
选择仅有一个子元素的元素;
如果去掉:only-child前边的p,那个孤独的span也会应用该样式;
同样可以使用:not反选,
简单来说,就是有兄弟节点的p所应用该样式;
:nth-child(n):
选择第n个子元素,可以结合选择器来限制
结合变量n(应该说是关键字吧= =),可以用来在表格里,列表里做隔行换色什么的
:nth-last-child(n):
基本同上...只不过是从后往前数
:nth-of-type(n):
这个跟上边的让我很蛋疼- -这两者的区别一直让人很凌乱,详情看下图
通过w3school上边做的.
p:nth-child(2)将父元素中子元素第二个为p的p的颜色设为红色,
p:nth-of-type(2)将子元素中的第二个p背景色设为绿色- -好乱的;
我认为两者的却别在于,nth-of-type计数过滤标签类型,而nth-child计数不过滤;
:nth-last-of-type(n):
这个不做解释了...反之
:last-child:
选取父元素中最后一个子元素
注意tr后边伪类的位置,这就是一个空格的差距= =上边那个选择的是最后一个tr,而下边那个是选择的tr中的最后一个元素;
:root:
选择文档根节点- -相当于 html {},但是权重要比html高,因为人家是伪类,沾点类就比标签高- -;
:empty:
选择没有子元素的标签,额,这个一般没什么大用,因为文本节点也是节点,一般就是表格有空单元格,列表有空项,然后做点处理,用js选择空元素时这个挺有用的;
:target:
W3C给的解释是设置活动的id的样式,其实就是浏览器路径上边缀着#什么,就选着什么 传送阵;
:enabled与:disabled:
用于表单元素是否可用的伪类;
:enabled为可用,:disabled反之;
:checked:
用于多选及单选被选中的伪类;
:not:
这个就不多说了- -上边用了那么多了;
::selection:
被选中文本的样式;
总结:
CSS3选择器带来了极大的便利,上文有什么不对或不详细,还请指出.有点虎头蛇尾了,哈哈
部分参考链接:
http://www.w3school.com.cn/cssref/css_selectors.asp
再来几个CSS4前瞻的
http://www.admin10000.com/document/5900.html
http://www.webhek.com/css4-selectors/
http://www.iinterest.net/2011/10/09/css4-selectors-level-4/
总结CSS3新特性(选择器篇)的更多相关文章
- 总结CSS3新特性(Transform篇)
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...
- 总结CSS3新特性(颜色篇)
颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数 ...
- 总结CSS3新特性(Animation篇)
动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { to ...
- 总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改 ...
- css3新特性选择器(补充)
1.选择p标签中的第一个字符 p:first-letter{ color:red; font-size:25px; } 2.选择p标签中的第一行 p:first-line{ color:red; fo ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
随机推荐
- 构建自己的PHP框架--抽象框架的内容
上一篇博客中,我们搭建了一个最简单的框架,从单一入口的public/index.php进入,解析出相应的Controller和Action,去执行,渲染出相应的页面或者输出相应的数据. 但是我们可以看 ...
- MFC 字符串类CString 源代码
原文:http://blog.csdn.net/benny5609/article/details/1926088 CString使用的是引用技术,可以共享数据(这个大家都知道),另外空的CStirn ...
- [转载]TFS源代码管理8大注意事项
目录 1. 使用TFS进行源代码管理 2. 如果代码没放在源代码管理软件里,等于它不存在 3. 要早提交,常提交,并且不要觉得麻烦 4. 提交前要检查你更改了什么 5. 写提交信息时一定要认真 6. ...
- c语言读取字符在记事本中出现次数
程序使用说明: 此程序可以统计出名称为1.txt的文件中/出现的次数 但是仅支持单个英文字母和标点符号查询,不支持汉字. 在本程序生成的exe根目录下放一个1.txt, 即可查询出该字符在1.txt记 ...
- 【Linux驱动】内核等待队列
在Linux中, 一个等待队列由一个"等待队列头"来管理,等待队列是双向链表结构. 应用场合:将等待同一资源的进程挂在同一个等待队列中. 数据结构 在include/linux/w ...
- Android Studio快捷键每日一练(2)
原文地址:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-2/ 12.复制行 苹果:Cmd+D Windo ...
- 检测WCF服务是否在线第二版
上一版在这里http://www.cnblogs.com/kklldog/p/4878296.html 上一版主要是解决了监控服务不需要手动添加服务引用的问题,但是还是需要在配置文件中添加对应的end ...
- Entity Framework基础01
学习了ADO.NET的相关知识,掌握了它对数据库表的基本操作,但是实际在开发项目应用中微软为我们开发ef这个ORM,使用它可以很方便的利用ADO.NET来操作DBMS,使得我们开发项目的着重点放在业务 ...
- ligerUI布局时,Center中的Tab高度太小问题解决
1.0 引用的js,css <link href="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css" rel= ...
- SQL Server 统计信息
SELECT * FROM SYS.stats _WA_Sys_00000009_00000062:统计对象的名称.不同的机器名称不同,自动创建的统计信息都以_WA_Sys开头,00000009表示的 ...