属性选择器：通过已经存在的属性名或属性值匹配元素。

1. 简单属性

[attr] 选择以 attr 为命名的元素

[class] { color: red; }           // 选择含有 class 属性的元素h1[class] { color: green; }       // 选择含有 class 属性的 h1 元素a[href][title] { color: blue; }   // 选择同时含有 href 和 title 属性的 a 元素#div[class] { color: purple; }    // 选择 id = "div" 且含有 class 的元素复制代码

    
h1标签
    
    
     div标签
    
    
    
     div标签
    
    google复制代码

2. 具体属性

[attr=value] 选择以 attr 命名，且属性值为 value 的元素

a[href="http://www.google.com"][title="google"] { color: red; }     // 匹配 href 和 title 都相同的 a 元素[class="test box"] { color: green; }                                // 注意：属性值要一致（顺序一样，不能多一个或少一个空格）[id="test"] { color: blue; }                                        // 注意：要与 id 选择器区分（优先级不用）复制代码

    google 一下    
class 为 test box 的 p 标签
    
    
     id 为 box 的 div 标签
    
复制代码

3. 部分属性

[class ~= "b"] { color: red; }          // 选择含有 class 属性，且属性值在用空格分隔的词列表中含有 b 的所有元素 如：class = "ab" 不满足，class =="a b" 满足[class |="test"] { color: green; }      // 选择以 test 作为属性值或以 test- 为前缀的属性值的所有元素a[href ^="#"] {color: blue; }           // 选择以 "#" 开始的 a 元素a[href $=".org"] { color: orange; }     // 选择以 .org 结尾的 a 元素p[class *="b"] { color: purple}          // 选择属性值含有 b 的 p 元素复制代码

    
    
     class 为 a b c 的 div 标签
    
    
    
     class 为 test 的 div 标签
    
    
    
     class 为 test-xxx 的 div 标签
    
    href 为 # 的 a 标签    
    href 为 orange.org 的 a 标签    
class 为 abc 的 p 标签
复制代码