CSS3选择器之学习笔记

首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚至第偶数个、奇数个子元素精选样式的制定。 /*选择器写法示例*/ nth-child(n) //正数第n个子元素nth-last-child(n) //倒数第n个子元素nth-child(odd)//正数下来所有的第偶数个子元素nth-last-child(even) //倒数上去的第奇数个子元素 那么nth-of-type与nth-last-of-type呢? 在一个div中有数篇文章,h2与p多次使用的情况要对h2实现奇偶异色,如果使用nth-child或是nth-last-child来实现就会发现一些问题(不提供demo代码,读者可自行编写h2ph2ph2p如此),试验的结果是没有出现奇偶异色,仅仅是奇数的变色了。 这个问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。换句话说,”h2:nth-child(odd)”这句话的含义,并不是指“针对div元素中第奇数个h2子元素来使用”,而是指“当div元素中的第奇数个子元素是h2子元素的时候使用。”(demo的话h2,p相互交错,h2都在奇数位置。) nth-of-type与nth-last-of-type可以避免这类问题的发生。使用这两个选择器的时候,CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候,就只针对同类型的子元素进行计算了。 /*选择器写法示例*/ h2:nth-of-type(odd) //第偶数个h2子元素h2:nth-of-type(even) //第奇数个h2子元素 新增结构伪类选择器列表:   E:root:匹配E所在文档的根元素   E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素   E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)…

CSS Transform / Transition / Animation 属性的区别

back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性。只是对于css几个新加的属性不太熟悉,常常容易搞混。研究了点资料,总结一下。 Introduce Transform 在部分的test case当中,每每演示transform属性的,看起来好像都是带动画。这使得小部分直觉化思维的人(包括我)认为transform属性是动画属性。而恰恰相反,transform属性是静态属性,一旦写到style里面,将会直接显示作用,无任何变化过程。transform的主要用途是用来做元素的特殊变形,对于做设计的人来说并不是很陌生,简单的来说就是css 的图形变形工具。 关于图形变形的基础条件当中的原点设定,在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的(有待研究)。其他的属性则根据这个属性来计算进行计算。 关于图形变化的模式,css3标准当中transform-style来定义。默认是flat,展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说,应该只需要preserve-3d就好了,但是从谣传“开启了perserve-3d就使用了GPU加速”来说,这个属性可能是为了降低系统消耗用的,毕竟3d比2d要多一个维度的计算。 如果需要使用3d模式,必须先指定style为3d,并在任意父元素上增加 perspective及 perspective-origin 来指定透视点。 具体的给设计师改变元素样式用的属性则有以下五个: translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的; rotate(deg)是用来控制元素旋转角度的;…