html 选择器之属性选择器

属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式。

使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值。

css3的属性选择器主要包括下面几种

  1. E[attr]:只使用属性名,但没有确定任何属性值;
  2. E[attr="value"]:指定属性名,并指定了该属性的属性值;
  3. E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“?”不能不写;
  4. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
  5. E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
  6. E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
  7. 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不支持,其余均正常

 

 

html 选择器之属性选择器,古老的榕树,5-wow.com

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