element-ui无法覆盖样式解决办法一

深碍√TFBOYSˉ_ 2023-07-11 12:50 0阅读 0赞

### 我添加的样式: ###

<el-card class="myself">
    </el-card>
    <style> .myself{ background-color: blue; color: blue; position: absolute; width: 500px; height: 700px; left: 60%; top: 5%; } </style>

### 按道理说我这个应该是覆盖了element-ui原本的样式,但是效果却是: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70][]

### 我自己的被他覆盖了 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]

### 于是我加了scoped在style上 ###

<el-card class="myself">
    </el-card>
    <style scoped> .myself{ background-color: blue; color: blue; position: absolute; width: 500px; height: 700px; left: 60%; top: 5%; } </style>

![在这里插入图片描述][20200305211723211.png]

### 怎么又覆盖回去了 ###

![在这里插入图片描述][20200305211851717.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305211521629.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200305211636650.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[20200305211723211.png]: https://img-blog.csdnimg.cn/20200305211723211.png
[20200305211851717.png]: https://img-blog.csdnimg.cn/20200305211851717.png