关于vue.js:vue组件中的样式属性scoped使用分享

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们在 style 标签上会加上 scoped, 然而如果咱们应用了其余的的一起框架, 咱们会发现如果加上了 scoped 之后无奈批改款式, 上面是我对 scoped 总结, 心愿对你有所帮忙!
4. 什么是 scoped ?

Scoped CSS 标准是 Web 组件产生不净化其余组件，也不被其余组件净化的 CSS 标准。vue 组件中的 style 标签标有 scoped 属性时表明 style 里的 css 款式只实用于以后组件元素。

5. 如何应用 scoped?

vue 应用办法:
在 style 标签上 加上 scoped

6.vue+element 应用 table 组件, 你会发现加上 scoped 属性之后, 有的款式没有失效, 增加 scoped 之前的成果:

7. 增加 scoped 之后的成果:

css 局部代码如下:
.chenshebei  .el-table--enable-row-hover .el-table__body tr:hover > td {background-color: #003b51 !important;}

.chenshebei .el-table th,
.chenshebei  .el-table tr {
  background-color: #0a2732 !important;
  box-sizing: border-box;
  color: #83c7e3 !important;
  opacity: 0.6;
}

.chenshebei  .el-table {
  background-color: #003b51 !important;
  box-sizing: border-box;
  margin: 1% auto;
  position: absolute;
  bottom: 0%;
  right: 2%;
}

7. 解决办法,css 代码, 如下:

.chenshebei /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {background-color: #003b51 !important;}

.chenshebei /deep/ .el-table th,
.chenshebei /deep/ .el-table tr {
  background-color: #0a2732 !important;
  box-sizing: border-box;
  color: #83c7e3 !important;
  opacity: 0.6;
}

.chenshebei /deep/ .el-table {
  background-color: #003b51 !important;
  box-sizing: border-box;
  margin: 1% auto;
  position: absolute;
  bottom: 0%;
  right: 2%;
}

// 留神: 深度选择器: /deep/ 也能够应用: >>> , 成果是一样的。一些预处理程序例如 sass 不能解析 >>> 属性，这种状况下能够用 deep，它是 >>> 的别名，工作原理雷同。

7-1. 效果图如下:

8. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

vue 组件中的款式属性 scoped 实例