css 属性选择器

                     属性选择器 ：对带有指定属性的html元素应用样式而不依赖class,id选择器。不用频繁使用class,id选择器，代码简洁 ，以及在表单为表单设置样式时很有效。下面举例说明。

                     属性选择器：选择有某个属性的元素

                             No.1  例为带href属性的元素添加样式

                                     a[href]

                                        {color:red;}

                                  <h1>可以应用样式：</h1>

                                <a href="http://w3school.com.cn">W3School</a>

 

 

                  属性和值选择器 ：

                              No.2    例为带  title="w3schoool"所有元素添加样式

                  [title=W3School] 

                                         { border:5px solid blue;}

<h1>可以应用样式：</h1>

                             <img title="W3School" src="/i/w3school_logo_white.gif" />

                             <br />

                          <a title="W3School" href="http://w3school.com.cn">W3School</a>

                             <hr />(hr代表水平线）

                         No.3  例为多个属性进行选择，将选择器链接在一起。

                                   

a[href][title]

                                       {color：red;}

 

<h1>可以应用样式：</h1>

<a title="W3SchooHome"href="http://w3school.com.cn">W3School</a>

 

<h1>无法应用样式：</h1>

<a href="http://w3school.com.cn">W3School</a>

            

                      根据部分选择属性值进行选择：   

                                          如根据属性值中此列表某个词进行选择用波浪号。               

 

                              No.4   例为选择class属性中important元素

                                          p[class~="important"]                         

                                                        {color: red;}

<h1>可以应用样式：</h1>

<p class="important warning">This is a paragraph.</a>

<p class="important">This is a paragraph.</a>

                   特定属性选择类型：

                         No.5  例 会选择 lang 属性等于 en 或以 en- 开头的所有元素

                              

                                  *[lang|="en"] {color: blue;}

 

                                <h1>可以应用样式：</h1>

<p lang="en">Hello!</p>

<p lang="en-us">Greetings!</p>

<p lang="en-au">G'day!</p>

                 No.6   例 为 如果图片名都是figure-1,figure-2形式，就可以用选择器匹配一系列图片。

img[src|="/i/figure"] {border: 1px solid gray;}

{  border: 1px solid gray;}

<h1>可以应用样式：</h1>

<img title="Figure 1" src="/i/figure-1.gif" />

<img title="Figure 2" src="/i/figure-2.gif" />

 

                          可见属性选择器应用广泛，文档，图片等等都可以不用class，id选择器就可以轻松搞定。

                                             备注：参考详见            

                                       http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

                                         http://www.w3school.com.cn/css/css_selector_attribute.asp