用法
普通的css語(yǔ)法: 在要修改的樣式前添加 >>> 符號(hào)
.demo >>> .el-table{
border: none;
}
scss語(yǔ)法: 在要修改的樣式前添加 ::v-deep
::v-deep .el-table{
border:none;
}
sass語(yǔ)法/less語(yǔ)法 : 在要修改的樣式前添加 /deep/
.demo /deep/ .el-table{
border:none;
}
scoped原理
當(dāng)一個(gè)style標(biāo)簽擁有scoped屬性時(shí)存哲，表明css樣式只在該組件中生效因宇，使用該修飾符會(huì)給dom生成唯一標(biāo)識(shí)[data-v-xxxxxx]七婴，可避免全局污染。
scoped修飾符
- 為組件實(shí)例生成一個(gè)唯一標(biāo)識(shí)察滑，給組件中的每個(gè)標(biāo)簽對(duì)應(yīng)的dom元素添加一個(gè)標(biāo)簽屬性[data-v-xxxxxx]
- 給<style scoped>中的每個(gè)選擇器的最后一個(gè)選擇器添加一個(gè)屬性選擇器打厘，原選擇器[data-v-xxxxxx]，如：原選擇器為.container #id div贺辰，則更改后選擇器為.container #id div[data-v-xxxxxx]
樣式穿透原理##
用了樣式穿透后户盯，被穿透的dom不會(huì)再加上唯一標(biāo)識(shí)[data-v-xxxxxx]，不添加/deep/饲化，樣式會(huì)作用在 .box[data-v-888888888] .son[data-v-88888888]上莽鸭，由于沒(méi)有這個(gè)節(jié)點(diǎn)所以失敗。添加/deep/吃靠，樣式會(huì)作用在 .box[data-v-888888888] .son上硫眨，樣式成功作用在子組件上。
