新增css3的3个属性选择器介绍

  • admin 发布于 2017-02-13 09:44:44
  • 栏目:网站前端
  • 来源:原创
  • 250 人围观
  • 4 个赞

css3较css2又新扩展了3个属性选择器,现在详细的来介绍一下这3个属性选择器,看它们各自的特点及开发的过程中如何来运用。

属性如下: 

属性选择器      描述 

E[attr^="val"]   选择匹配元素E,且E元素定义了属性attr,其属性值以val开头的任何字符串。 

E[attr$="val"]   选择匹配元素E,且E元素定义了属性attr,其属性值以val结尾的任何字符串。(与E[attr^="val"]相反) 

E[attr*="val"]   选择匹配元素E,且E元素定义了属性attr,其属性值任意位置包含了“val”。换句话说,字符串与属性值中的任意位置相匹配。 

下面,我们通过一个实际的案例来演示效果:

代码:

效果:

评论