总结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/

时间: 2024-10-08 19:55:28

总结CSS3新特性(选择器篇)的相关文章

总结CSS3新特性(Transform篇)

概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画; 旋转(rotate): rotate支持一个参数,一个角度值 0-360deg #demo { transform:rotate(180deg) ;/*实现旋转,左上角的东西会在右下角显示*/ } 缩放(scale): scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正

总结CSS3新特性(颜色篇)

颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL 当亮度为100%时为白色,当亮度为0%为黑色; 饱和度100%以及亮度50%时生成的颜色均为web安全色 rgb(): rgb函数:r(re

总结CSS3新特性(Animation篇)

动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 10px; } 100% { top: 0; }/*100%可用to关键字替代*/ } 由于是CSS3,所以不出意外的各种前缀: --图片来自MDN,CSS中的关键帧 单个帧中可填写多个属性,而且不需要保证一致,如: @-web

css3新特性选择器(补充)

1.选择p标签中的第一个字符 p:first-letter{ color:red; font-size:25px; } 2.选择p标签中的第一行 p:first-line{ color:red; font-size:25px; } 3.在p的前面和后面添加伪类 p:before/after{ content:"': 设置属性样式 } 4.设置input在得到焦点.可以被修改.不能被修改.选中时的样式 input:focus/enabled/disabled/cheked{ background:

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa

个人总结(css3新特性)

1.前言css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画.个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3.写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻

CSS3新特性简介

1.CSS3 边框:通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框,如border-radius:box-shadow:border-image 2.CSS3 背景:CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制.background-size:background-origin 3.CSS3 文本效果:CSS3 包含多个新的文本特性.text-shadow:word-wrap 4.CSS3 @font-face规则:可将设计师希望使用的字体文件存放到web服

Atitti css3 新特性attilax总结

图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染(Text-decoration) 描边12 CSS3 的多列布局(multi-column layout)13 边框和颜色(color, border)14 CSS3 的渐变效果(Gradient)15 线性渐变15 径向渐变16 CSS3 的阴影(

[转]深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用 C