Html 如何覆盖自定义占位符css

我有一个表单，从手机屏幕查看时需要占位符。我在桌面模式下不需要它们，所以我添加了一些css，在屏幕分辨率切换到mobile之前，它的字体是白色的。然后改变颜色，使其可见。问题是在桌面模式下，有一些文本区域需要显示占位符。如何覆盖样式表中的css

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color:    #FFFFFF !important;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
color:    #FFFFFF !important;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
color:    #FFFFFF !important;
}
 input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color:    #FFFFFF !important;
}
@media (max-width: 1070px) {
 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color:    #737373 !important;
}
 input:-moz-placeholder, textarea:-moz-placeholder { 
color:    #737373 !important;
 }
input::-moz-placeholder, textarea::-moz-placeholder { 
color:    #737373 !important;
 }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color:    #737373 !important;
 }
 }

添加一个可见类

.visible:：-webkit输入占位符{
颜色：#000！重要；
}

---

将上述类添加到需要显示占位符的textarea中

可以使用JavaScript在textarea标记上切换CSS类。在样式表中定义包含所需颜色的类。如何将input:：css添加到类中？正确的格式是什么