[随笔][转] Element-UI修改默认的菜单样式+el标签选择方法+scope样式穿透

说一下这个问题的解决思路，虽然我只是修改了水平菜单栏，但其他控件的样式修改思路应该是差不多的。对于Element-UI这种前端框架，里面的自定义标签（例如el-menu，el-header等）基本上都是通过设置原生html标签的class属性来实现的，包括自定义标签的其他属性，最后大部分都转换成了class的值（例如el-menu的mode属性如果是horizontal，那么最后会转换成class中的一个值“el-menu–horizontal”，而菜单中的slot属性title会转换为“.el-submenu__title”，bootstrap就很直接，直接设置原生html标签的类属性），所以修改样式时只需找到这些标签对应的类名称，然后按照结构用css语法做相应的处理。
知道了原理还不行，最麻烦的实际上还是怎么找这些类的值，用F12开发人员工具一步一步找到自己需要的内容，对于那些在浏览器源码中没有找到的属性，就需要自己琢磨一下了。
————————————————
偷个懒，直接贴CSDN博主「雁丘1990」的原文地址：
https://blog.csdn.net/xCyansun/article/details/85374883

---

CSS的coped私有作用域和深度选择器

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符:

<style scoped>
    .parent >>> .child { 
    	/* ... */ 
    }
</style>

而对于less或者sass等预编译，是不支持 >>> 操作符的，可以使用 /deep/ 来替换 >>> 操作符，例如：.parent /deep/ .child { /* ... */ }

来源–> 简书