目錄

配置環(huán)境

錯誤方向

解決?

總結(jié)

配置環(huán)境

pc端

node? 16.14.0?

npm? 8.3.1?

vue? @vue/cli 5.0.8

錯誤方向

在使用element-ui時，發(fā)現(xiàn)有時候可以在控制臺利用內(nèi)置的類來改變節(jié)點元素樣式，但是當(dāng)數(shù)據(jù)一多就無法利用了（即，無效利用），并且，在無效后在其上添加會發(fā)現(xiàn)，添加的樣式處于所需要綁定的上層，故又無效。

?

無效===>

?

style樣式的優(yōu)先度>類的優(yōu)先度，故無法綁定所需，只能賦予其上層樣式

解決?

在局部樣式中，利用element-ui中內(nèi)置樣式設(shè)置自定義樣式前加上? ?/deep/

有效===>

?

?將原有內(nèi)置樣式替換自定義樣式，搞定 ！

總結(jié)

在網(wǎng)上總共有以下幾種方法：

1、深度選擇器：>>>? ? 影響子組件

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

2、將樣式定義到全局，分為有作用域和無作用域樣式

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

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


<!--需使用權(quán)重來實現(xiàn)覆蓋樣式-->
.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/ 深度選擇器寫法

僅個人學(xué)習(xí)，勿噴文章來源地址http://www.zghlxwxcb.cn/news/detail-478542.html

到了這里，關(guān)于Element-ui踩的坑-“CSS樣式”的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！