CSS使用樣式穿透的多種方法

發(fā)布時(shí)間：2023-10-30 16:44:13 作者：佚名

本文給大家分享CSS樣式穿透的幾種方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

通常在引入第三方 UI 組件庫(kù)（如 element-ui或者easyUI等等），需要自定義組件樣式時(shí)，但由于樣式使用了 scoped 屬性（為避免組件之間的樣式相互影響），導(dǎo)致無(wú)法直接覆蓋原組件的樣式，這時(shí)就需要用到樣式穿透。

CSS使用樣式穿透的方法有以下幾種：

1、使用 >>>符號(hào)：

.container >>> .el-input__inner {
    width: 160px;
}

該方法適用的樣式語(yǔ)法：css、stylus

2、使用 /deep/：

.container /deep/ .el-input__inner {
    width: 160px;
}

該方法適用的樣式語(yǔ)法：sass、scss、less

3、使用 ::v-deep：

::v-deep .el-input__inner {
    width: 160px;
}

該方法對(duì)所有樣式語(yǔ)法通用，即適用于 css、stylus、sass、scss 和 less

其中/deep/ 和 ::v-deep 屬于深度選擇器。

到此這篇關(guān)于CSS樣式穿透的幾種方法的文章就介紹到這了,更多相關(guān)CSS樣式穿透內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片