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

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,心愿对你有所帮忙,让咱们一起致力走向巅峰!