liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0のセレクタ - 属性(element)セレクタ

<!DOCTYPE html>

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> 属性セレクタ </title>
   <style type="text/css">
    div {
        width:550px;
        height:25px;
        background-color:#eee;
        border:1px solid black;
        padding:10px;
    }
    div[id] {
        background-color:#999;
    }
    div[class=class1] {
        background-color:#899;
    }
    div[class~=class2] {
        background-color:#799;
    }
    div[class|=class4] {
        background-color:#699;
    }
    div[name^=name1] {
        background-color:#599;
    }
    div[name$=name2] {
        background-color:#499;
    }
    div[name*=name3] {
        background-color:#399;
    }
    
    </style>
</head>
<body>
<div id="abc">div[id] : id属性を持つdiv</div>
<div class="class1">div[class=class1] : class属性値が"class1"のdiv</div>
<div class="class2 class3">div[class~=class2] : class属性値が空白で分割され、その内"class2"をもつdiv要素</div>
<div class="class4|class5|class6">div[class|=class4] : class属性値が|で分割されている内、最初の値がclass4のdiv要素 ⇒ なぜか効かないね</div>
<div name="name1234">div[name^=name1] : name属性値がname1で始まる要素</div>
<div name="123name2">div[name$=name2] : name属性値がname2で終了する要素</div>
<div name="123name3456">div[name*=name3] : name属性がname3を含む要素</div>
</body>
</html>

f:id:liguofeng29:20160126222411p:plain