善用你的html的属性选择符

    在学习Css3.0选择符的时候,参考了《CSS3.0参考手册》。有个地方没有说明,于是被坑了半个小时呀!

    在这里和大家分享一下,在选择符分类那里,有一类是属性选择符是通过字串来匹配的!

形式有以下几种:


属性名选择符
E[att] -- 匹配文档中具有att属性的E元素
属性值选择符
E[att=val] -- 匹配文档中具有att属性且其值为val的E元素
E[att~=val] -- 匹配文档中具有att属性且其中一个值(多个值使用空格分隔)为val(val不能包含空格)的E元素
E[att|=val] -- 匹配文档中具有att属性且其中一个值为val,或者以val开头紧随其后的是连字符-的E元素(主要用来允许语言编码的匹配,例如HTML中的hreflang属性。关于lang(或 xml:lang)语言码的比配,可查看:lang伪类)
属性值子串选择符
E[att^=val] -- 匹配文档中具有att属性且其值的前缀为val的E元素
E[att$=val] -- 匹配文档中具有att属性且其值的后缀为val的E元素
E[att*=val] -- 匹配文档中具有att属性且其包含val的E元素



    在上述的引用引用中,橙色的三个便是经常使用的!

    但使用的时候,我们应该注意一个坑,就是这些属性选择符并不是所有标签都适用,它只适用于HTML文档性质的标签,常见的如<p>、<del>、<a>这些!当你将属性选择符用于一些非文档性质的元素时,它不会进行匹配!

    还有需要注意的是,我们这些是属性选择器,也是css的样式,所以需要在头部<head>或者外部css文件来表明。

    下面写一个简单的例子。

    

<!DOCTYPE html>
<html>
	<head>
		<style>
		del[id$="l1"]
		{
			color:green;
		}
		</style>
	</head>
	<body>
		<del id="del1">This is del1</del>
		<br>
		<del id="del2">This is del2</del>
		<br>
	</body>
</html>

   可以知道,"This is del1"的内容将会变成绿色!

    如图:

    




    同时我们可以测试一下块级区域,通过字串选择符来匹配一下!便可以知道对于块级区域无效

<!DOCTYPE html>
<html>
	<head>
		<style>
		div[id$="v1"]
		{
			color:green;
		}
		</style>
	</head>
	<body>
		<div id="div1" style="color:red;width: 300px;height:200px;border:1px solid">This is div1</div>
		<br>
		<div id="div2" style="color:red;width: 300px;height:200px;border:1px solid">This is div2</div>
		<br>
	</body>
</html>

    如图:

    

    可以看见字串匹配模式不生效,所以它的使用的对象应该是文档性质的!


    

本文出自 “且行且欣赏” 博客,请务必保留此出处http://skytina.blog.51cto.com/6834539/1565539

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。