HTML5中CSS3的屬性選擇器

枕夢發表於2017-05-09
HTMLCSSS3
CSS3屬性選擇器：
E[att] (選擇具有att屬性的E元素。 )
E[att="val"] (選擇具有att屬性且屬性值等於val的E元素。 )
E[att^="val"] (選擇具有att屬性且屬性值為以val開頭的字串的E元素。 )
E[att$="val"] (選擇具有att屬性且屬性值為以val結尾的字串的E元素。 )
E[att*="val"] (選擇具有att屬性且屬性值為包含val的字串的E元素。 )
E[att~="val"] (選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等於val的E元素（包含只有一個值且該值等於val的情況）。 )

E[att|="val"] (選擇具有att屬性且屬性值為以val開頭並用連線符"-"分隔的字串的E元素，如果屬性值僅為val，也將被選擇。有多個時，沒有效果 )


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*1.img[alt="234"]{
            margin: 20px;
        }*/
        /*2.img[alt^="2"]{!*以2開頭*!
            margin: 20px;
        }*/
        /*img[alt$="3"]{!*以3結尾*!
            margin: 20px;
        }*/
        /*img[alt*="3"]{!*全部屬性有3的*!
            margin: 20px;
        }*/
        img[alt~="123"]{/*以3結尾*/
            margin: 20px;
        }

        .divHeight{
            height: 200px;
        }
        .divWidth{
            width: 200px;
        }
        .divBg{
            background-color: red;
        }
        .divBg2{
            background-color: yellow;
        }
    </style>
    <title>屬性選擇器</title>
</head>
<body>

<img src="../../img/11.jpg" alt="123">
<img src="../../img/11.jpg" alt="234">

<div class="divHeight divWidth divBg">

</div>
<div class="divWidth divHeight divBg2">

</div>
<div class="a-div">
    1
</div>
<div class="b-div">
    2
</div>
<div class="c-div">
    3
</div>

</body>
</html>

相關文章