css属性选择器

    今天买了本《css权威指南》,翻译的一般般,不过还是学到了很多的新知识,其中css属性选择器更是平时用的很少的,在此罗列一下,最简单的属性选择器类似于这样 

    h2[title]{color:#222;} 这个就是选择带有title属性的h2标签

如果你迫不及待想看示例则点击这里

示例代码如下
   
 <style>
 .wrap{width:800px;margin:0 auto;} 
 h2{width:500px;} 
 h2[class]{color:#ee5599;} 
 img[alt]{border:3px solid red;} 
 h2[title="123"]{color:#ee9988;} 
 h2[class~="warning"]{color:#995500;} 
 h2[title^="title"]{color:#d12341;}
 h2[title$="title"]{color:#ed2341;}
 h2[title*="test"]{background-color:#e12345;}
 </style> 
 <h2 class="title">我是h2 我有class属性哦</h2> 
 <h2 >55555550我是h2 我么有class属性</h2> 
 <img src="http://myway.sinaapp.com/include/demo/images/123.jpg" alt="我有alt属性哦"/> 
 <h2 title="123">我是h2 我的 title属性=123哦</h2> 
 <h2 class="title warning">我是h2 我的class包含warning</h2> 
 <h2 class="warning">我是h2 我的class只有warning</h2> 
 &l;th2 title="title我有title哦是title哦">title我有title哦是title哦</h2>
<h2 title="我有title哦是title">我有title哦是title</h2>
<h2 title="我有title哦是test哦">我有title哦是test</h2>
  

h2[title="123"]{color:#ee9988;} 表示选择title="123"的h2标签;而 h2[class~="warning"]{color:#995500;} 则表示选择class中包含warning这个值得h2标签咯;还有其他的属性选择器见下表

 类型  描述
 [foo="bar"]  选择foo属性等于"bar"的元素
 [foo~="bar"]  选择foo属性包含"bar"的元素
 [foo^="bar"]  选择foo属性以“bar"开头的元素
 [foo$="bar"]  选择foo属性以“bar"结尾的元素
 [foo*="bar"]  选择foo属性值中包含子字符串"bar"的元素例如 <h2 foo="testbar"></h2>

还有一个特殊的属性选择器如下代码

  
<style>
*[lang|="en"]{color:blue;}
</style>
<h1 lang="en">hello 我的lang是en</h1>
<p lang="en-us"> 我的lang是en-us
<div lang="en-au">我的lang是en-au</div>
<p lang="fr">我的lang是是fr
<h4 lang="cy-en">我的lang是cy-en</p>

这个规则会选择lang属性等于en或者以en-开头的元素,因此示例中的前三个元素会被选中,而后两个元素不会被选中

本文标题:css属性选择器
本文链接:https://56way.com/p/8.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。