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之后会进行样式穿透,即父元素下的所有子元素都使用该样式。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值