首页 > 代码库 > html 选择器之属性选择器

html 选择器之属性选择器

2024-07-04 05:23:29   240人阅读

属性选择器的主要作用个人的理解就是对带有指定属性的元素设置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="http://www.mamicode.com/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不支持，其余均正常
 
 






























        

            
                
                  
                
                

                    联系

                    我们