当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 特效 - Gemination(一)

点击数:24412012-12-30 10:48:12 来源: 海盈网络

      基于同一样式表的两种设计

      禅意花园的自由风格让Egor Kloos有机会证明CSS是一种能够实现任何创意的有效工具。Egor对CSS浓厚兴趣让他开始学习。并最终能够娴熟的控制浏览器,从而造就出了Germination这部用一张样式表表现两种迥异风格的作品。在创作中他也体会到了一些自己的想法——那就是聪明的运用代码可以成就让人惊艳的艺术作品。


CSS禅意花园-Gemination


      6.2.1  MOSe 

     早在Gemination之前,人们就已经讨论过了通过强化CSS支持而改善页面设计的想法。这个想法本身非常简单:首先发掘出浏览器对特定CSS选择器支持的缺陷,然后基于这些CSS选择器分别为每种支持它的浏览器(包括Mozilla及其衍生的Firefox、Opera和Safari等)编写不同的CSS代码,以实现不同的设计。


      MOSe特别关注那些IE不能支持的选择器。其中最常见有子选择器( child selector).邻接选择器(adjacent sibling selector)和属性选择器( attribute selector)等。

      1.子选择器

      顾名思义,子选择器用来选择给定元素的子元素。它的行为有些类似后代选择器(  desendant selector),但是后代选择器却能够选择父元素的任意子孙元素,即便该元素已经嵌套于更深层次的子元素中。

      若想编写子选择器,我们可以先写出父元素,然后加上“>"连接器(combinator)(连接器是指那些用来连接选择器的符号),最后添上子元素。

      例如:

      基于上述CSS代码,所有#content元素的直接子段落元素都将显示为橙色,如图6-2-1所示。


      2.邻接选择器

      邻接选择器用来选择元素的兄弟元素。具体做法是:首先定义第一个元素,然后使用“+"连接器,最后定义邻接元素完成样式规则,例如:div#warning p + p { color:  red;}


本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
      海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作网站维护等全方位专业服务,欢迎咨询。

【责任编辑:(Top) 返回页面顶端