12761


初めまして。css初心者なのですが、学習をしていく中で記法でわからない部分が出たのでご質問させていただきます。

例えばなのですが、

[code]

    <p class="abc">こんにちは</p>
    
[/code]

というHTMLに対し、

[code]

    p[class="abc"] { color: blueviolet; }
    
    p.abc { color: blueviolet; }
    
[/code]

このどちらのcssも"こんにちは"という文字を紫色で表示してくれると思うのですが、この二つの記法に関して何か違いなどはあるのでしょうか？  
「こっちを使用して書いた方が良い」や、「この二つの意味の違い」などがあれば教えていただけると幸いです。

よろしくお願いします。


CC BY-SA 3.0
2015-07-28T06:12:34.083
12760
2015-07-28T06:41:41.160
2015-07-28T06:41:41.160
7256
10708
question
html css
CSSのクラスセレクタと属性セレクタの違い


class属性はスペース区切りで列挙できます。つまり

[code]

    <p class="abc def">こんにちは</p>
    
[/code]

であっても`p.abc`にマッチします。しかし`p[class="abc"]`にはマッチしません。`p[class~="abc"]`だとマッチします。


CC BY-SA 3.0
2015-07-28T06:35:22.847
12761
2015-07-28T06:35:22.847
4236
12760
answer