vue修改当前页样式不影响公共样式的方法

Posted 2023-05-01

参考技术A 在项目开发中需要对一些标签进行样式修改但是每次修改之后其他页面的样式也会跟着改变，

在网上找了很多方法都不好使后来大神告诉我一种方法很好用分享给大家。

1：首先在template标签下的第一个div中定义一个以本文件为名的class，只要class唯一就行。

2：在style标签添加lang="scss"，并把所有的样式都包含在 .DeviceInfo 即可。如下图：

前端样式修改心得

今天对公司项目登录页进行了修改。

项目登录页构成：头部和底部为公共模板页，中间部分为登录页自身所有。

鉴于此，中间部分因不用担心改动影响到其它页面，故最好改，不必细谈。对于头部和底部，首先借助浏览器调试工具找到关键元素及其选择器，再在浏览器上进行修改与测试（对于div层数较复杂的，只能靠猜）。若所要修改的元素属性已存在，且所需的值与其他页不同，则在当前页所在的html里对该元素属性重新定义即可。有时，因原元素属性权重较高，导致直接在html里进行定义后仍无效，则应在该属性值后叫‘!important’增加其权重。在此，若所需修改元素为仅有类选择器，且该类为某UI框架定义，则最好不要对其进行修改，可以给该元素添加ID选择器，在ID选择器里重新定义元素属性。因ID选择器的权重高于类选择器，所以一般情况，不需在元素属性值后添加‘!important’。

（以上部分简言之即：若要修改的内容为公共模板页，且修改效果仅为当前页所用，则将冲突的元素属性重新定义到当前页HTML里。若重新定义后，效果仍没变化，则考虑是否是权重引起，若是，在新定义的元素属性值后添加“!important”。“!important”能不用就不用，因为其可能引发新的权重问题.）

常见修改：

1.输入框只留下边框

input{

border-top:none;

border-left:none;

border-right:none;

border-bottom:1px solid black;

}

2.输入框无背景色（即透明）：

input{

background:transparent;

}

3.输入框点击时光标颜色值设置：

input：focuse{

color:white;

}

4.输入框placeholder颜色改变：

input::-webkit-input-placeholder {

     /* WebKit browsers */
     color: white !important;//添加 !important是为了增加其权重，在不知道权重如何的情况可以不添加，当发现不添加就没有效果的时候，就添加上吧
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
     color: white !important;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
     color: white !important;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
     color: white !important;
}