vue3+element-plus单独的样式穿透？

Question

这是三个按钮 要给第三个按钮单独设置 hover的样式
这样写 是设置了全部的按钮


上面这两种写法 不生效，有什么好办法吗，你们是怎么解决的

Answer 1

Vue3.x 开始请使用 :deep() 来做样式穿透。
这里是官方文档的说明 👉 #深度选择器 - 单文件组件 CSS 功能 | Vue.js 可以阅读一下。

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

---

另外你得选择器用错了，应该是下面这样的

.buttons.el-button:hover {
  ...

而不是

.buttons .el-button:hover{
  ...

.button 和 .el-button 应该是同级的而不是上下级关系。

不过最好是使用这种方式。而不是用 deep 来穿透：

.my-class .buttons{
  ...

因为如果没有父级去限制你样式的应用范围。使用 :deep(.buttons.el-button:hover) 可能会污染全局样式。而 Ele+ 中的 el-button 样式也正好权重是10的，所以可以直接用权重更高的 .my-class .buttons 来覆盖。

Answer 2

不生效有很多可能，1.权重不够，2.样式穿透失败,3.你的样式路径有问题，就没作用到正确的dom上；去浏览器控制台找下对应按钮，看下样式表就知道了。