Efeito vue o escopo do sass e menos, o efeito da profundidade do seletor / deep / (estilo elemento-ui não alterar)

Premissa, eu escrevi algum código css e encontrou como nenhum proveito, mas a alteração diretamente no navegador muito óbvio

< Estilo   lang = "SCSS" tipo = "text / SCSS" escopo > 
  #details span.ant-input-group-addon { 
    width : 120px ; 
  } 
</ Style >

Mais tarde, verificou-se o suficiente âmbito cancelada, por isso tome cuidado para verificar a próxima

 

Use escopo atributos descritos < div > elemento de estilo: 

< div > 
< estilo tipo = "text / css" escopo > 
h1 de { Cor : Vermelho ; } 
P { Cor : Azul ; } 
</ style > 
< h1 de > este título é vermelho o </ h1 de > 
< P > presente número é azul. </ O p > 
</ div > 
escopo atributo é um atributo booleano. 

Se o padrão atributo é aplicado apenas para o elemento pai e o elemento filho de elementos de estilo.

Depois de usar o original tem como escopo, elemento pai estilo não vai penetrar na submontagem. Portanto, este não é encontrado modelo de etiqueta modelo vue é propriedade de seu filho, e depois foi para verificar as informações, constatou que se o escopo necessário para penetrar em subcomponentes, você pode adicionar - profundidade agindo selector / Deep / , em sass e menos pode ser utilizado em

< Estilo   lang = "SCSS" tipo = "text / SCSS" escopo > 
  #details / deep / span.ant-input-group-addon { 
    width : 120px ; 
  } 
</ Style >

< Estilo   escopo tipo = "text / menos" lang = "menos" > 
  #details { 
    / deep / span.ant-input-group-addon { 
      width : 120px ; 
    } 
  }

 

>>> ele também pode ser usado, mas eu achei que o teste só pode ser usado em sass, menos erro

< Estilo   lang = "SCSS" tipo = "text / SCSS" escopo > 
  #details >>> span.ant-input-group-addon { 
    width : 120px ; 
  } 
</ Style >

ps: Eu estava apenas aprendendo, se errado, por favor indicar, imediatamente corrigido