CSS

屬性選擇器

• e[att]：屬性選擇器(Simple attribute selector)
  • 當元素為e，且具有att屬性，則套用樣式

    <style type="text/css">
        div[width] { color: Red; }
    </style>
    
    <div>
        <div>Black</div>
        <div width="50px">Red</div>
    </div>
    

  • 註：元素e和[中間不可以有空白字元
• e[att="val"]：準確屬性選擇器(Exact attribute value selector)
  • 當元素為e，並具有att屬性，且att屬性的值為val時，則套用樣式

    <style type="text/css">
        div[width="50px"] { color: Red; }
    </style>
    
    <div>
        <div width="40px">Black</div>
        <div width="50px">Red</div>
    </div>
    

  • 註：元素e和[中間不可以有空白字元
• 部份屬性選擇器(Partial value attribute selector)
  • 註：屬性選擇器的元素e和[中間不可以有空白字元
  • e[att~="val"]：當元素的屬性值，可用空白隔開時設定多個值時，若其中有一個值為val，則套用樣式

    <style type="text/css">
        div[class~="Red"] { color: Red; }
    </style>
    
    <div>
        <div class="Wrapper Big">Black</div>
        <div class="Wrapper Red Big">Red</div>
    </div>
    

  • e[att^="val"]：當元素e具att屬性，且其值以val開頭，則套用樣式

    <style type="text/css">
        div[class^="Sec"] { color: Red; }
    </style>
    
    <div>
        <div class="SecContent">Red</div>
        <div class="Bigger SecContent">Black</div>
        <div class="Sec">Red</div>
    </div>
    

  • e[att$="val"]：當元素e具att屬性，且其值以val結尾，則套用樣式

    <style type="text/css">
        div[class$="End"] { color: Red; }
    </style>
    
    <div>
        <div class="ContentEnd">Red</div>
        <div class="ContentEnd Bigger">Black</div>
        <div class="End">Red</div>
    </div>
    

  • e[att*="val"]：當元素e具att屬性，且其值含有子字串val，則套用樣式

    <style type="text/css">
        div[class*="Img"] { color: Red; }
    </style>
    
    <div>
        <div class="ContentImg">Red</div>
        <div class="ContentImg Bigger">Red</div>
    </div>
    

• e[att|="val"]：特定屬性選擇器(Particular attribute selector)
  • 當元素為e，並具有att屬性，且att屬性的值為val、val-或以val-開頭時，則套用樣式

    <style type="text/css">
        div[class|="Img"] { color: Red; }
    </style>
    
    <div>
        <div class="Img">Red</div>
        <div class="Img-">Red</div>
        <div class="Img-Content">Red</div>
        <div class="ImgContent">Black</div>
    </div>
    

  • 若具att屬性，且值不為val，但以val開頭，不會套用樣式
  • 註：元素e和[中間不可以有空白字元