存档
CSS的目标，或者说是革命纲领就是：“将样式与内容分离”，这个目标能否实现，很大程度上依赖于CSS访问内容的能力。在CSS3中，这个任务得到了有力支持，强大的结构伪类Structural pseudo-classes出现了。提供了非常丰富的查询方式，让CSS选择器变得如此和蔼可亲了。让我们来快速概览一下，同时期待着浏览器整体换代的来到，毕竟只有最新的浏览器才支持CSS3选择器及其他特性。 支持浏览器：Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+ CSS结构伪类 Method Description E:root 选择文档的根结点，在HTML文档中也就是HTML节点 E:first-child 选择该节点的第一个子节点。 E:last-child 选择该节点的最后一个子节点。 E:nth-child(n) 选择指定节点的第N个子节点。 示例： li:nth-child(1) /*选择Li元素的第一个节点*/ E:nth-last-child(n) 和上面的伪类逆序，选择指定节点从最后一个子节点开始的第N个子节点示例: li:nth-last-child(1) /*选择Li节点的最后一个子节点*/ E:nth-of-type(n) 选择父节点之下，所有指定类型的的节点中的第N个，有点晦涩的一句话。还是看示例比较清楚： ul li:nth-of-type(1) /*选择当前页面上所有Ul之下的第一个Li节点，包含嵌套的Ul之下的第一个Li*/ p:nth-of-type(odd) /*选择所有的奇数项的P元素，一下子解决了表格的交替背景色问题*/ E:nth-last-of-type(n) 选择父节点之下，所有指定类型的节点中倒序的第N个节点，和上面的正好顺序相反 示例： option:nth-last-of-type(2) /*选择所有的select下倒数第二个option节点*/ option:nth-last-of-type(-n+3) /*选择倒数3个option节点，是多重选择*/ E:first-of-type 和上面的两个伪类类似，不过这个简单版，就是取第一个或者是最后一个示例: p>quote:first-of-type /*选在所有P节点下第一个quote节点*/ E:last-of-type 同上: tr>td:last-of-type /*选择每一行的最后一个单元格*/ E:only-of-type 选择在父节点之下，符合所有子节点中只有一个该类型节点条件的节点。又是比较难懂的一句话，也就是说，在子节点集合中，该元素必须符合指定类型，同时仅含有一个的情况。示例: [...]
众所周知，所有的浏览器都有一些关于CSS功能的额外扩展，例如（-ms-interpolation-mode），这些通常来自于那些未在CSS标准中明确完整的定义的特性和功能或者是在标准中已经完整定义但浏览器只是部分支持。CSS2.1标准中规定，以上这些不完全合乎标准的特性都必须使用一个供应商前缀(Vendor Prefix ‘-ms-’ for Microsoft, ‘-moz-’ for Mozilla, ‘-o-’ for Opera)。 下面介绍一下IE8下的这些额外扩展，当然我们的目的不是把那些IE Only的特性带入下一代的页面中，而是能够在浏览器支持的前提下，运用一些属于CSS3的特性，丰富一下创作思路。 Property Type W3C Status -ms-accelerator Extension -ms-background-position-x CSS3 Working Draft -ms-background-position-y CSS3 Working Draft -ms-behavior Extension -ms-block-progression CSS3 Editor’s Draft -ms-filter Extension -ms-ime-mode Extension -ms-layout-grid CSS3 Editor’s Draft -ms-layout-grid-char CSS3 Editor’s Draft -ms-layout-grid-line CSS3 Editor’s Draft -ms-layout-grid-mode CSS3 Editor’s Draft -ms-layout-grid-type CSS3 [...]
