属性选择器

选择符	描述	出现版本
E[att]	选择具有 att 属性的所有元素	CSS2
E[att=val]	选择具有 att 属性且属性值等于 val 的所有元素	CSS2
E[att|=val]	选择具有 att 属性且属性值为以 val 开头并用连接符"-"分隔的字符串的所有元素	CSS2
E[att~="val"]	选择具有 att 属性且属性值为包含 val 单词的所有元素	CSS2
E[att*="val"]	选择具有 att 属性且属性值为包含 val 字符串的所有元素	CSS3
E[att^="val"]	选择具有 att 属性且属性值为以 val 开头的字符串的所有元素	CSS3
E[att$="val"]	选择具有 att 属性且属性值为以 val 结尾的字符串的所有元素	CSS3

• 例子一

  • index.html

    <h1 class="test">二级标题 class="test"</h1>
    <p class="test">正文内容 class="test"</p>
    <p class="green">正文内容 class="green"</p>
    <p>正文内容</p>
    <p>正文内容</p>
    

  • index.css

    [class] {
      color: #c82829;
    }
    
    p[class] {
      font-weight: bold;
    }
    
    p[class='green'] {
      color: #718c00;
    }
    

• 例子二

  • index.html

    <p>正文内容</p>
    <p class="start1">正文内容 class="start1"</p>
    <p class="start-1">正文内容 class="start-1"</p>
    <p class="start-2">正文内容 class="start-2"</p>
    <p>正文内容</p>
    

  • index.css

    p[class|='start'] {
      color: red;
    }
    

• 例子三

  • index.html

    <p>正文内容</p>
    <p class="teststr">正文内容 class="teststr"</p>
    <p class="test str">正文内容 class="test str"</p>
    <p class="test substring">正文内容 class="test substring"</p>
    <p>正文内容</p>
    

  • index.css

    p[class~='str'] {
      font-size: 26px;
    }
    
    p[class*='str'] {
      color: red;
    }
    

• 例子四

  • index.html

    <p>正文内容</p>
    <p class="starttest">正文内容 class="starttest"</p>
    <p class="start_test">正文内容 class="start_test"</p>
    <p class="testend">正文内容 class="testend"</p>
    <p class="test_end">正文内容 class="test_end"</p>
    

  • index.css

    p[class^='start'] {
      color: #c82829;
    }
    
    p[class$='end'] {
      color: #718c00;
    }