Element UI修改CSS样式的问题

Element UI修改CSS样式的问题

1 CSS优先级

行内样式优先级>内嵌样式/链接单独文件

单独链接和内嵌样式需要按顺序选择，按就近原则采用样式，后定义的样式优先级高。

• 行内样式：在div定义DOM时用style属性声明
  <div style="color: red; font-size: 16px;">上班好辛苦</div>
  内嵌样式（内部样式表）：单独写在style标签中
  <style> div { color: red; font-size: 12px; } </style>
• 链接样式（外部样式表）：样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。
  <style lang="scss" scoped> @import "@/xxx/xx.scss"</style>
<style lang="scss" > @import "@/xxx/xx.scss"</style>
<link rel="stylesheet" href="css文件路径">
• 现在一般使用SCSS设置样式:
  CSS、SCSS、LESS语法的区别详解
  Scss–@mixin–使用/实例
  Ctrl+滚轮 可以放大开发者工具代码大小。

2 scoped 与！important

Element UI设置CSS样式的坑：

• 有时设置的样式不起作用，因为element.style是浏览器自带的样式且优先级最高，需要添加！important来强制改变优先级。（添加！important的情况靠自己一个一个尝试，这个还没看出来规律）

• ！important可以将CSS样式等级提到最高，但如果某个属性写了 ！important，在从这个页面跳转到另一个页面时，如果那个页面也有名为 .el-tabs__item 的CSS类，此时 ！mportant 属性会从第一个页面“串”到第二个页面上。

• 即使是模块化编程下，在对应的模块中import css进来，这个css仍然是全局的，就导致在css中需要加上对应模块的html的id/class 使用css选择器保证css的作用域不会变成全局而被其它模块的css污染。但还有另外一种方法解决这个问题，就是加上scoped。

• 在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

• 需要在局部组件中修改第三方组件库的样式，又不想去除scoped属性从而造成组件之间的样式覆盖。这时可以通过特殊的方式穿透scoped，即：
  若要在一个子组件中修改第三方组件库用scoped+::v-deep，全局修改不加scoped。

• 如果 CSS 使用原生样式，用 > 来修改第三方组件样式：
  <style scoped> 外层 > 第三方组件 { 样式 } </style>

• 如果使用了预处理器 less sass scss 可能会因无法编译报错，就可以使用 /deep/ 修改，但是 vue-cli3 以上的版本不支持，还可以使用使用 ::v-deep（最好使用这个）：
  <style scoped> 外层 ::deep 第三方组件 { 样式 } </style>

3 CSS伪类

• hover是鼠标移到这个元素上变成此样式，鼠标移开变回没有hover的样式：

<style scoped>
.el-tabs__item{
  font-size: 24px !important;
  color: #46b8da;
  margin-left: -14px;
  border-color: #1a5773;
}
.el-tabs__item:hover{
  font-size: 50px !important;
  color: #f0ad4e;
  margin-left: -14px;
}
</style>

• :before 和 :after 这两伪类选择器功能是在元素前后增加额外的内容
  具体实例：link
• link，visited，hover，active

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

• :first-child 伪类可以选择父元素的第一个子元素

<style>
p:first-child
{
	color:blue;
} 
</style>

4 ::v-deep

加了::v-deep之后会进行样式穿透，即父元素下的所有子元素都使用该样式。