Autres façons d'écrire /deep/ dans le développement VUE v-deep :: in vue3: deep(.img)

Dans le développement réel, nous rencontrons souvent une situation où une exigence fonctionnelle telle qu'une table peut utiliser directement les composants de table des bibliothèques de composants telles que element, ce qui permet d'économiser du temps et des efforts.
insérez la description de l'image ici
Mais les exigences réelles ne seront pas toujours exactement les mêmes que les composants. L'interface utilisateur aura différents styles sans contrainte pour vous, comme ce style de tableau.
Pour le moment, il existe deux options

Écrivez-en un par vous-même avec une écriture native, mais il est extrêmement hostile aux recrues juniors et vous fera perdre beaucoup de temps et de détours
Réécrire le style natif du composant

Et réécrire le style nécessite l'utilisation de /deep/la pénétration de style

`/deep/`

VUE officiel

Afin d'assurer l'unicité du css pour chaque composant et d'éviter de polluer ou d'être pollué par le global, vue fournit une portée étendue.
De cette manière, une valeur de hachage unique sera générée lors de l'empaquetage, de sorte que le style du composant parent n'affectera pas le composant enfant.
Modifiez uniquement le style de cet endroit, et il ne changera pas lorsque d'autres pages utiliseront ce composant, vous pouvez donc utiliser /deep/
Le même effet peut être obtenu en remplaçant /deep/ par >>>.

<template>
    <el-table  
    	...
        class="table" 
    ></el-table>
</template>

<style scoped>
.table /deep/ th{
      
      
    text-align: center;
    padding: 4px;
}
.table /deep/ td{
      
      
    border: none;
    padding: 0;
}
.table /deep/ .cell{
      
      
    padding: 0;
    margin:0px 6px;
}
</style>

Mais notez que le sélecteur /deep/ est la propre norme du navigateur chrome et que d'autres navigateurs n'ont pas implémenté cette norme, donc les autres navigateurs ne sont pas valides.

Ajouté : !importer

L'écriture CSS a des priorités différentes à différents endroits, rejoint ! Le style importcss a la priorité la plus élevée

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title> 
</head> 
<style type="text/css">
.testClass{
      
       
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
        测试Css中的Important
    </div>
</body>
</html>