使用Bulma CSS框架时如何自定义修改input输入框的边框颜色

问题原因 #

你的自定义样式不生效存在2个核心错误：

• SCSS中类选择器缺失.前缀，section-changing-input会被识别为HTML标签选择器，无法匹配到绑定了对应类名的元素
• 选择器嵌套逻辑错误：section-changing-input是直接加在<input>标签上的类，不是input元素的父容器类，你写的嵌套规则实际匹配的是<section-changing-input>标签下的所有input元素，完全匹配不到目标元素

修复方案 #

直接修改General.scss的样式规则即可，以下两种写法都可以生效：

写法1（最简写法，无需嵌套）

.input.section-changing-input {
  border-color: crimson;
}

同时指定Bulma原生.input类和自定义类，优先级高于Bulma默认样式，无需加!important也能正常覆盖。

写法2（嵌套写法，符合SCSS书写习惯）

.section-changing-input {
  &.input {
    border-color: crimson;
  }
}

其中&代表父选择器本身，编译后和写法1的规则完全一致。

如果仍存在样式被覆盖的情况，可以加上父级类提升优先级：

.control .input.section-changing-input {
  border-color: crimson;
}

内容的提问来源于stack exchange，提问作者Mr. Hankey