代潇瑞博客

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

| 点击次数:4204

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”。换句话说,字符串与属性值中的任意位置相匹配。


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


css:

div[class^=dai]{

  color: red;

}


html:

<div class="daixiaorui">

    ppppppppp

</div>


效果如下图:

blob.png

看了这个例子,相信另外两个属性也不难理解了。css3属性选择器,就是这个强大。

【相关推荐】

触屏版 | 电脑版

Copyright © 2013 代潇瑞博客手机版

QQ: 446673330

粤ICP备13071969号-1