CSS中的属性选择器

CSS3中共有7种属性选择器，具体说明如下：

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）

以下是一个简单的灯箱广告示例：

    
        
        
        
    
    
        

            
        

            
            2
            3
            4
            5
            6
            7
            8
            9 
            

            
        
    

 

 由于我习惯用360，当然由于CSS版本的升级，现在几乎适配所有浏览器。

具体的例子在代码段的nav里。