总结CSS3新特性(选择器篇)

总结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反选,

: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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王鹤的专栏

Vue.js 2.0源码解析之前端渲染篇

Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势。...

5.9K0
来自专栏用户2442861的专栏

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

1311
来自专栏一“技”之长

Bootstrap响应式前端框架笔记三——代码与表格

    在技术博客文章类页面的开发中,常常需要在文本总插入说明代码,使用code便签可以创建这种效果,示例如下:

1183
来自专栏CDA数据分析师

如何使用python进行web抓取?

本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

2468
来自专栏Nian糕的私人厨房

CSS 消除 inline-block 元素间的间隙

从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

1174
来自专栏郭少华

(第一季)Vue2.0-内部指令

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核...

1203
来自专栏hightopo

原 基于 HTML5 Canvas 的 3

1525
来自专栏老马寒门IT

02Vue.js快速入门-Vue入门之数据绑定

Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到...

2755
来自专栏HT

基于HTML5和WebGL的碰撞测试

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

2499
来自专栏知道一点点

bootstrap快速入门笔记(六)-代码

一,内联代码<code>:For example, <code>&lt;section&gt;</code> should be wrapped as inli...

862

扫码关注云+社区

领取腾讯云代金券