现在的位置: 首页 -> 前端学习 -> CSS -> css3新增的3个属性选择器介绍

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

2017-01-26 23:26评论数 0 ⁄ 被浏览 7596 views+

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属性选择器,就是这个强大。

 

文章出自:https://www.daixiaorui.com/read/237.html 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 0 条评论  @我要评论

    您的每一个评论都是对我的一份支持

     博客二维码

    昵称 *

    邮箱 *