CSS3 中易混淆属性 (1)

100
TaoAlpha2015-06-011762 words6 minutes to read

开题说明

继jekyll tips系列之后, 这次新开CSS3 tips系列. 以记录学习研究过程中对css3的困惑以及心得~

今日主题

今日的主题主要有以下三个方面, 我会逐一说明.

nth-child() 和 nth-of-type()

nth-child()和nth-of-type()都是CSS3新引入的pseudo class. 两者有着非常接近而又细微的差别.

其中:

  • :nth-child() 指的是 “第x个指定的元素;

  • :nth-of-type() 指的是 “第x个指定的该元素;

有点难以理解? 看下下面的例子就可以了:

1
2
3
4
5
<section>
   <span>Little</span>
   <p>Piggy</p>    <!-- p:nth-child(2) -->
   <p>second one</p>    <!-- p:nth-of-type(2) -->
</section>
1
p:nth-child(2) { color: red; }
1
p:nth-of-type(2) { color: red; }

多数情况下, 两者确实是可以混用的, 但对于类似上述的这种情况或者是对于table元素(因为table下的tr和th是同级别元素), 那么这个细微的差别就很有价值了.

目前:nth-of-type的支持已经比较普遍了, 主流浏览器都是从比较早的版本就支持了:Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE 9+ .

initial 和 inherit

initial 和 inherit 虽然不是css3的新元素, 但也算是很少用的几个属性之一了. 两者的区别其实和语意差别是完全一致的.

  • initial: 初始值, 通过这一值可以将某个css属性恢复到初始状态, 基本来说就是当前浏览器的默认状态, 可以说一个非常方便的reset;

  • inherit: 继承值, 顾名思义, 继承其母元素的属性;

在元素母元素为html或者body且两者无样式的时候, 对两者的首级子元素而言, 用initial或者inherit效果是完全一样的.

两个属性都是极少用到的属性, 当然也能理解, 首先很多浏览器对很多元素而言, 属性默认值就是inherit, 而initial虽然可以说是极好的reset方式, 但是想象一下每个css属性都需要重置, 一个个写…也够累的…

意识到这个问题的人自然很多, 尤其是那些浏览器背后的天才工程师们, 他们已经开始着手做准备了~ 于是就有了all: initial这种神级的设定~ 可以一次性的reset所有属性, 可惜的是, 其目前得到的浏览器支持是很有限的:) chrome肯定有的喽~

em 和 rem

em,rem是CSS新引入的字体尺寸单位了, 都是相对单位. 和initial, inherit异曲同工的就是两者的区别也近似后者.

  • em: 相对的对象是母元素;
  • rem: 相对的对象是根元素:root

对于em和rem有两种用法:

  • 全局rem式: 设定全局根元素, html的字体尺寸为绝对值, 比如20px, 然后所有子元素都使用rem来定义其字体大小;

  • 模块式: 鉴于上面的情况在复杂网页中有可能会出现放大比例的误差增大, 更好的一种方式就是将网页设定为模块式, 每个模块的母元素使用一个绝对大小, 子元素设定em;

具体选用哪一个, 还需要大家各自衡量喽~

参考资料:

techcss3tips