注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

[分享] CSS4新特性预览  

2014-12-01 11:55:29|  分类: HTML+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

近期W3C发布了CSS更新的内容,业界人士表示这些更新内容很多都比较实用。一起来看看,新的CSS将让浏览器带给我们哪些新的感受。

导读:视觉能够带来的震撼是很难抵挡的。很难想像,如果没有CSS,网页效果会处在怎样的刀耕火种时代。几行短短的简单代码,却能将世界“艺术”地呈现在人的眼前。在众多的Web前端开发者还陶醉在CSS3带来的惊喜中时,CSS4又粉墨登场,带来更简洁、更丰富的众多新特性。这篇稿子只介绍了其中极少的几个新特性,更多内容,请继续关注CSDN。

CSS大概是网页设计师和开发人员之间的最佳桥梁了,每当有新CSS规范出现都令人兴奋。近期W3C发布了CSS更新的内容,业界人士表示这些新内容很多都比较实用。一起来看看,新的CSS将让浏览器带给我们哪些新的感受。

一、父元素选择器:$E > F 

可以通过父元素选择器“$”将样式应用到父元素上。

 

  1. /* style the LI element */ 
  2. ul > $li > p { border1px solid #ccc; } 

在上面的代码中,“li”这个元素其实也是一个子元素,这容易产生混淆,因此,我们需要修改这段代码以免产生异义:

 

  1. $ol > li:only-child { 
  2.   list-style-typenone
  3. }  

这样就能清楚地读懂,“li”的父元素“ol”获得了其子元素的样式。

二、链接地址伪类:“:any-link ”和“:local-link”

这些伪类将用于定位元素。 any-link用于一般链接,而:local-link用来识别针对同一主机(而不是外部链接时所用到的“href”)。

 

  1. #sidebar a:local-link { 
  2.   backgroundurl(internal.png) 0 0 no-repeat

为所有外部链接增加图标:

 

  1. :not(:local-link) { 
  2.   backgroundurl(external.png) 0 0 no-repeat

这些伪类大大丰富了链接样式的定义。

三、语言伪类:“:dir”

:dir伪类可让文本自左向右或自右向左显示。代码如下:

 

  1. copyp:dir(ltr) { /* left to right */ 
  2.    
  3. div:dir(rtl) { /* right to left */ 

四、综合案例

这个例子是关于一个输入状态的样式,我们可以看到纳入了斜线“/”语法。

 

  1. label:matches(:hover, :focus) /for/ input { 
  2.   box-shadow: #fffea1 0 0 8px 

 

  评论这张
 
阅读(19)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017