为什么在vue中写的css都没法生效

叁歲伎倆 2024-04-18 16:09 18阅读 0赞

为了确保css不被全局污染，我们给每个组件的style添加了scoped，其实这样就实现了样式的模块化

vue中的scoped属性的效果主要通过PostCSS转译实现；如：  
转译前：

<template>
      <div class="example">hi</div>
    </template>
    
    <style scoped>
    .example {
      color: red;
    }
    </style>

转译后：

<template>
      <div class="example" data-v-f3f3eg9>hi</div>
    </template>
    
    <style>
    .example[data-v-f3f3eg9] {
      color: red;
    }
    </style>

vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。对于当前组件下调用的其他组件，data属性只会添加到第一层HTML中（比如我们在自己的组件中，使用element ui组件）

解决方法：\*\*

## 深度作用选择器 ##

\*\*  
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符；有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

<style scoped>
    .a >>> .b { /* ... */ }
    </style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

我最终解决是这样的样式：

<style lang="scss" scoped>
      div /deep/ .el-table__expanded-cell{
        align:center !important;//这个没生效
        padding-left: 100px !important;//这个可以实现
      }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关为什么在vue中写的css都没法生效

了确保css不被全局污染，我们给每个组件的style添加了scoped，其实这样就实现了样式的模块化 vue中的scoped属性的效果主要通过PostCSS转译实现；如...

叁歲伎倆/ 2024年04月18日 16:09/ 0 赞/ 19 阅读

相关在 MySQL 中指定了查询索引，为什么没有生效？

> 我们知道在 MySQL 中使用 force index 可以指定查询的索引，但并不是一定会生效，原因是 MySQL 会根据优化器自己选择索引，如果 force index

拼搏现实的明天。/ 2024年02月17日 10:36/ 0 赞/ 60 阅读

相关 vue中data里为什么要写return

[https://blog.csdn.net/sinat\_42664398/article/details/89840602][https_blog.csdn.net_sin

约定不等于承诺〃/ 2023年06月29日 02:27/ 0 赞/ 34 阅读

相关为什么大家都在吹捧 Python ？

2020年，Python可学吗？答案是可。近些年间，Python 的火热有目共睹，作为一种功能强大的高级编程语言，在2018 年的时候它的流行程度就得到了大幅提高。

本是古典何须时尚/ 2022年12月27日 09:09/ 0 赞/ 201 阅读

相关 [Vue]写 Vue 项目时为什么要在列表组件中写 key，其作用是什么？

key能提高diff效率其实是不准确的。见vue/patch.js，在不带key的情况下，判断sameVnode时因为a.key和b.key都是undefined，对于列表

╰+攻爆jí腚メ/ 2022年11月30日 01:23/ 0 赞/ 221 阅读

相关 CSS - 如何在React中优雅的写CSS - 学习/实践

1.应用场景 <table> <tbody> <tr> <td>主要用于学习掌握如何在react中书写css样式, 实现页面布局.</td> </tr

布满荆棘的人生/ 2022年11月22日 05:14/ 0 赞/ 208 阅读

相关为什么大家都在用WebRTC？

WebRTC代表网络实时通信。它是一种非常令人兴奋，强大且具有高度破坏性的尖端技术和标准。自从WebRTC诞生以来，80%的浏览器都开始支持它。有数据显示，2017年~2021

旧城等待，/ 2022年10月09日 00:34/ 0 赞/ 242 阅读

相关 vue中使用animate.css；animate.css不生效

第一步：安装： npm install animate.css --save 第二步：引入及使用： // main.js中：

小鱼儿/ 2022年09月04日 05:00/ 0 赞/ 153 阅读

相关在Vue中引入全局css(Global CSS in Vue)

为什么我们要使用全局样式？ 1. 有些时候我们可能使用--别人--封装好的组件库进行开发，如Element 但是又不想用他的属性，我们需要覆盖

矫情吗；*/ 2022年01月12日 09:55/ 0 赞/ 884 阅读

相关 Animate.css 在vue中的应用

官网：[http://www.animate.net.cn/][http_www.animate.net.cn] 在线演示：[https://www.dowebok.com/

喜欢ヅ旅行/ 2021年07月25日 17:03/ 0 赞/ 476 阅读