Element-ui踩的坑-“CSS样式”

目录

配置环境

错误方向

解决 

总结

---

配置环境

pc端

node  16.14.0 

npm  8.3.1 

vue  @vue/cli 5.0.8

错误方向

在使用element-ui时，发现有时候可以在控制台利用内置的类来改变节点元素样式，但是当数据一多就无法利用了（即，无效利用），并且，在无效后在其上添加会发现，添加的样式处于所需要绑定的上层，故又无效。

 

无效===>

 

style样式的优先度>类的优先度，故无法绑定所需，只能赋予其上层样式

解决 

在局部样式中，利用element-ui中内置样式设置自定义样式前加上   /deep/

有效===>

 

 将原有内置样式替换自定义样式，搞定 ！

总结

在网上总共有以下几种方法：

1、深度选择器：>>>    影响子组件

<style scoped>
.a >>> .b { /* ... */ }
</style>

2、将样式定义到全局，分为有作用域和无作用域样式

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>


<!--需使用权重来实现覆盖样式-->
.aritle-page{ //你的命名空间
    .el-tag { //element-ui 元素
      margin-right: 0px;
    }
}

3、使用  lang="less"  嵌套样式写法

需引入（版本自定）

"less": "^4.1.2",
"less-loader": "6.0",

<style lang="less" scoped>
.a {
    .b{
        .c{
            /*样式*/
        }
    }
}
</style>

可能还有方法，但本人没有尝试过，可能不全，但不推荐，毕竟需要嵌套或者覆盖

个人推荐 /deep/ 深度选择器写法

仅个人学习，勿喷