本文介绍: 在CSS中,选择器优先级是根据其特定性和声明顺序确定的。当多个选择器具有相同的特定性时,后面声明样式覆盖前面样式选择器用于穿透组件作用域,将样式应用于子组件元素。它的作用是使得样式选择器范围扩大到子组件内部以便修改组件样式uniapp微信小程序使用input组件时,想要改变提示placeholder样式,但是使用。如果你在使用`scoped`属性时无法改变`placeholder`的样式,可能是由于。

问题描述

uniapp微信小程序,使用input组件时,想要改变提示placeholder 的样式,但是使用placeholderclass 改变不了

如下

<input type="text" placeholder="搜索" placeholder-class="placeholder_class">

<style lang="less" scoped&gt;
    .placeholder_class{
      font-size: 26rpx;
    }
</style&gt;

问题分析 

如果你在使用`scoped`属性时无法改变`placeholder`的样式,可能是由于样式的优先级问题。在CSS中,选择器优先级是根据其特定性和声明顺序确定的。当多个选择器具有相同的特定性时,后面声明的样式会覆盖前面的样式。

解决方案

方法一:去掉scope

为了避免影响我的其他代码,所以还是要使用scoped我们可以单独再写一个style

<style lang="less" scoped&gt;
   //原本其他的css样式
</style>
<style>
   .placeholder_class{
      font-size: 26rpx;
    } 
</style>
方法二:使用deep选择器

deep选择器用于穿透组件的作用域,将样式应用于子组件的元素。它的作用是使得样式选择器的范围扩大到子组件内部以便修改子组件的样式。

<style lang="less" scoped>
    /deep/ .placeholder_class{
      font-size: 26rpx;
    } 
</style>

记录一下。。 

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注