vuedose.tips（翻译系列二十一）

Style inner elements in scoped CSS using /deep/ selector in Vue.js

Hey again! Guess what? I have a very cool tip to share with you made by a great dev who you most probably know.

But that’s for the next week, so let’s see this one’s!

In the The importance of scoped CSS in Vue.js you saw why scoped CSS is important when we want to achieve style encapsulation in components. If you haven’t read that tip, I strongly suggest you to do so to understand this one.

But when we tri

用scoped限定的CSS时，您可以修改要自定义的组件的根元素。

换句话说，在示例的BlueList.vue和RedList.vue中，我们只能修改BaseList.vue的.list类，因为它是该组件的根元素。

但是内部元素呢？我们想要设置.list-item类的样式以更改项目的颜色。

为此，我们有/ deep /选择器，您可以使用它来访问组件的内部元素，如下所示：

<style scoped>
.list /deep/ .list-item {
  color: white;
  background: #42a5f5;
}
</style>

Take a look at theupdated exampleand see how now it works as expected and each of them have a different color.