CSSのクラスセレクタと属性セレクタの違い


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

例えばなのですが、

[code]

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

というHTMLに対し、

[code]

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

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

よろしくお願いします。




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

[code]

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

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




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

[code]

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

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

