VUE开发中/deep/的使用其他写法v-deep:: vue3中写法 :deep(.img)

原创已于 2023-03-03 16:15:46 修改 · 2w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #html

于 2021-09-22 10:42:04 首次发布

学习笔记专栏收录该内容

68 篇文章

订阅专栏

本文介绍Vue中样式穿透的两种方式:/deep/与>>>的选择器使用方法及其原理,并附带CSS优先级提升技巧(!important)。

实际开发中经常会遇到一种情况，一个功能需求例如表格，可以直接使用element等组件库的表格组件，省时省力。
在这里插入图片描述
但实际需求总不会是和组件完全一样的，UI会有各种天马行空的样式给你，例如这种表格样式
这时候有两条路可选

自己用原生手写一个，但对于初级菜鸟来讲极不友好，会浪费大量时间走弯路
对组件原生样式进行改写

而改写样式就需要用到/deep/样式穿透了

`/deep/`

VUE官方

为了保证每个组件的css唯一性，避免污染全局或者被全局污染，vue提供了scoped作用域。
这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了。
只修改这个地方的样式，在其他页面用到本组件的时候不变，就可以用/deep/了
把 /deep/ 换成 >>>，也可以达到同样的效果。

<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>

但注意，/deep/选择器这个是chrome浏览器自己的标准，其他浏览器并没有实现这个标准，所以其他浏览器是失效的。

补充： !import

CSS写在不同的地方有不同的优先级,加入了!importcss样式优先级最高

<!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>