为什么Angular使用属性选择器进行css封装

Question

在Angular（2+）中，组件的CSS由属性选择器封装。

e.g。当我写下面的CSS时，

 .myClass     { ... }
 div          { ... }
 div.myClass  { ... }
 div .myClass { ... }

然后Angular编译如下

 .myClass[_ngcontent-htp-42]     { ... }
 div[_ngcontent-htp-42]          { ... }
 div.myClass[_ngcontent-htp-42]  { ... }
 div[_ngcontent-htp-42] .myClass[_ngcontent-htp-42]{ ... }

为什么呢？

我理解封装的重要性。 但是，我认为也可以使用css-class。喜欢这个

 ._ngcontent-htp-42 .myClass     { ... }
 ._ngcontent-htp-42 div          { ... }
 ._ngcontent-htp-42 div.myClass  { ... }
 ._ngcontent-htp-42 div .myClass { ... }

使用属性选择器有什么好处？