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 之前的效果:

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,希望对你有所帮助,让我们一起努力走向巅峰!