CSS3中新增属性总结

1 伪类选择器(用于选择子元素用的)

table tr:nth-of-type(odd) 奇数行

table tr:nth-of-type(even) 偶数行

table tr:nth-child(odd) 奇数行

table tr:nth-child(even) 偶数行

效果如下:

:nth-child(参数) 更加灵活

n+i:表示从第i行开始往后全部选中

i:表示只选中当前的第i行

2n/3n:表示选中2的倍数行 3的倍数行

所以:nth-child 用于选择子元素还是非常灵活和方便的

还有另两个:

:nth-first-child 表示选中第一个子元素

:nth-last-child 表示选中最后一个子元素

未完待总结。。。

原文地址：http://blog.51cto.com/11871779/2132680

时间： 2024-10-10 09:44:43

CSS3中新增属性总结的相关文章

CSS3的新增属性及其用法

CSS3的新增属性及其用法现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

css3中新增的一些有用的选择器

css3中新增呢很多新的玩意!有的东西玩着玩着就会被玩坏(呵呵,只是没什么用很鸡助),这来总结下我认为有用的, 不喜勿喷!有错误就请指出!绝对自己总结的,不当伸手党! 属性选择器: div[index]{background:red} 表示div下面带index属性的背景为红色 div[index=a]{background:red} 表示div下面的自定义属性index=a的div的颜色变成红色. div[index~=a]{background:red} 只要div中index

css3中font-face属性的用法详解

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo

CSS3中动画属性transform、transition和animation

Transform:变形在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform

初识 css3中counter属性

最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器兼容性可以看[这里] 2.counter的作用实际上是代替了javascript作为一种计数器工具,在css中使用.元素出现了几次就默认增加多少对应值.增加值大小还可以由自己设置. 可以想象当我们设置好一次规矩之后,以后无论添加多少标签,计数工具自动帮我们算计数,不必手动输入那些值.而且这些不必借

CSS3中新增的内容

(整理中······) 一.选择器新增的伪类 1.:first-of-type 选择属于其父元素的首个的X元素的每个X元素 2.:last-of-type 选择属于其父元素的最后的X元素的每个X元素 3.:only-of-type 选择属于其父元素的唯一的X元素的每个X元素 4.:only-child 选择属于其父元素的唯一子元素的每个X元素 5.:nth-child(2) 选择属于其父元素的第二个子元素的每个X元素二.盒子模型新增了边框属性: 1.border-rad

css3中新增的样式使用方法

在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3前缀使用介绍,我们直接看个例子: Java代码 -webkit-transform:rotate(-3deg); // 给Chrome和Safari等webkit内核的浏览器使用 -moz-transform:rotate(-3deg); // 给Firefox浏览器使用 -ms-tran

css3.0新增属性学习

2D 转换(须在style里面定义):位移,缩放,旋转,斜切(扭曲) 转换---关键字:transform; 属性有: 1, 位移:translate(0px,0px) 属性值:(0px,0px)括号里跟两个值,用逗号分割,使元素沿x轴,y轴坐标位移,第二个值可以不给,如果不给则默认为0. 2, 缩放:scale(.5, .5) 属性值:(.5 , .5)括号里跟两个小数(百分数),用逗号分割,元素中心点做为缩放基点, 使元素沿x轴,y轴坐标按比例缩放,第二个值可以不给,如果不给则默

简单说下我对H5的新增的标签和css3的新增属性

HTML 英文全称是:HyperText Markup language: 中文全称是超文本标记语言又称超链接文本标记语言: H5呢就是HTML第五代版本: 首先智能表单 <form action="" method="post"> <input type="color" name="" id="" value="" /> <input type=&qu