在css样式中存在element.style,不知道怎样才能找到修改它,希望谁能帮助一下。

html-css011

在css样式中存在element.style,不知道怎样才能找到修改它,希望谁能帮助一下。,第1张

怎么解决element.style的页面样式问题 原创2020-03-25 15:06:05我是王小贱 码龄5年关注今天写页面的时候,需要给表头设置一个颜色,明明设置了颜色的css属性,但是页面中就是没效果。打开浏览器调试器才发现不知道哪儿冒出来一个element.style的东西,将表格头颜色设置了transparent属性,导致我的css中设置的颜色无效。很无奈,因为关于这个element.style不知道从哪儿冒出来的,页面中压根都找不到该属性方法。看下图可以看出,element设置了颜色属性,造成了我css中设置的颜色无效。在网上搜了搜element.style的属性,大概说的意思就是,这是我引入外部js/css包里人家定义好的,他的这种样式会把自己的样式给覆盖掉。需要在自己定义的样式后面加上!important控制来优先使用自己的样式。于是我在自己定义的样式后面加上了 !important当然,对于这个问题还有其他的解决方法。既然页面中css属性找不到这个element的属性设置,那么肯定在你引用的js中设置了这个东西,找出来,修改掉就行了。希望对你们有所帮助。

最近项目的原型设计中有这样一个需求,在表格中插入一个步骤条,先贴一张完成的图片,效果如下:

    开始做的时候,查看了一下element官方文档(传送门: Element官方文档 ),官方文档中只有一些比较基本的样式,例如:描述的步骤条、带图标的步骤条等,这里就不一一赘述了。

    首先,在表格中加入插槽,插入步骤条组件

使用表格的cellStyle属性,设置步骤条一列对齐方式为左

    在步骤条组件上绑定class,根据当前列中步骤条进度分别给“已完成”、“进行中”、“未开始”三种状态的步骤条赋上对应的类样式,js方法如下:

css样式如下, 切记修改element组件原样式的时候需要建立一个style标签,去掉scoped,并在element组件外层用一个父元素包含起来,缺前者设置会不生效,缺后者会影响全局样式。

这里我是将步骤条原样式中的数字颜色改成透明,分别设置三种状态的圆圈大小及背景色,然后用.el-step__icon类设置定位,用 .el-step.is-horizontal .el-step__line设置步骤条横线的粗细及位置,根据具体表格的对应列宽高来设置就好啦。

social-share-element是一个css的类名,实际上没有特殊含义。

对于二级类命名,则采用组合书写的模式,两个单词之间使用中横连“-”接,如:

搜索框:search-input

搜索图标:search-icon

搜索按钮:search-btn