PHP程序员学习笔记|如何学习PHP

个人总结的PHP学习方法


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

2017-6-28 0phpcom 经典文章


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

« 网页如何为打印设置单独的css样式 | js获取url链接中的域名部分»
发表评论:









订阅Rss