CSS3属性选择器完成JavaScript的工作

2019-09-13 郑州网站建设  

CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。在以前只能用JavaScript来完成的工作,通过CSS的这些技术也可以来完成。

属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独的属性,比如[type],或者可以是一个属性和取值的组合,比如[type=checkbox] [for="邮箱"]

我们也可以用属性选择器来匹配属性存在与否以及子字符串。例如,我们可以在空格分隔开的列表中匹配属性值,或者我们可以匹配以字符串tel:开始的属性值。我们甚至可以匹配带连字符的属性值如en-US。其中连字符匹配和空格分隔属性值列表匹配早在CSS2中已有定义。

CSS3的增强在于添加了部分(partial)匹配规则。本篇将着重介绍新引入的属性选择器(Attribute selectors)使用办法。

1.部分匹配

使用全属性值来匹配是很常用的办法,不过在CSS3中我们可以使用部分匹配,语法格式是:

[att~=val]

这里att代表属性,val代表空格分隔开来的属性值列表中的某一个值。波浪线~表示部分匹配的语义。

比如:

<a href=http://www.divcss5.com/css3-style/"http:/www.ikinsoft.com/" class="html5 friends">ikinsoft</a>

2.子字符串匹配

我们还可以通过子字符串来匹配属性值,有点类似于正则表达式:

^= 从头部匹配

$= 从尾部匹配

*= 包含某子字符串

比如下面的html代码:

<a href=http://www.divcss5.com/css3-style/"tel:+13800138000">Call ikinsoft online support</a>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2097.html转载请标明出处,谢谢合作!
标签:
  • 动画
  • CSS3
  • 引入
  • 除了
  • CSS3JavaScri