html 选择器之属性选择器
属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式。
使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值。
css3的属性选择器主要包括下面几种
- E[attr]:只使用属性名,但没有确定任何属性值;
- E[attr="value"]:指定属性名,并指定了该属性的属性值;
- E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“?”不能不写;
- E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
- E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
- E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
- E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
1.E[attr]属性选择器
.head a [id]{background:black;...}
.head 下所有带有id属性的a都将背景色变成黑色
.head a [id][href]{background:black;...}
.head 下所有带有id和href属性的a都将背景色变成黑色
2.E[attr="value"]这个选择器必须指定值
.head a [id=“first”]{background:black;...}
或者写成.head a [href="aaa.html"][id]{background:black;...}
需要注意的是,如果class有2个共用,必须要和html中的一样如:
<a href="" class="links item" title="open the website">7</a>
.head a[class="links item"]{color:red};//正确
.head a[class="links"]{color:red};//错误
3.E[attr ~="value"] 包含value(必须是一个完整的值)这个值即可
<a href="" class="links item" title="open the website">7</a>
.head a[class~="links"]{color:red};//正确(只需要value值在attr中被包含即可)
4.E[attr ^="value"] 以value值开头的都将被选中
<a href="http:baidu.com" class="links item" title="open the website">7</a>
<a href="hao123.com" class="links item" title="open the website">7</a>
.head a[href ^="http:"]{color:red};//第一个被选中
5.E[attr $="value"] 以value值结束的都将被选中
<a href="http:baidu.com" class="links item" title="open the website">7</a>
<a href="hao123.cn" class="links item" title="open the website">7</a>
.head a[href $="com"]{color:red};//第一个被选中
6.E[attr *="value"] 只要包含value就可以(value甚至可以是一个单词的一半)
<a href="" class="links item" title="open the website">7</a>
.head a[class*="lin"]{color:red};//正确(只需要value值在attr中被出现过即可)
7.E[attr |="value"] 值等于value活着以value-开头
a[lang|="zh"]{background:gray;color:yellow;}
<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a> <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a> <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
2,3,4都将被选中
这些属性选择器ie6不支持,其余均正常
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。