引入Bulma框架时CSS通配符*设置全局白色文字不生效怎么办

CSS样式生效遵循优先级权重规则：权重更高的样式规则会覆盖权重更低的同属性规则，权重相同时，后加载的样式会覆盖先加载的。
你写的通配符选择器*权重值为0，而Bulma框架内置的文本样式（比如.title、.subtitle、strong等元素的灰色文本规则）使用的是类选择器/标签选择器，权重值远高于通配符选择器，因此即使你的自定义CSS在Bulma之后引入，低权重的通配符白色规则依然会被Bulma的高权重样式覆盖，最终文本显示为框架默认的灰色。

你可以根据自己的需求选以下任意一种方案：

• 方案1（推荐，无副作用）：利用color属性可被继承的特性实现全局白色，不需要依赖低权重的通配符：

/* 给顶层body设置白色，所有未单独设置color的子元素会自动继承 */
body {
  color: #ffffff;
}
/* 让Bulma内置写死了color的组件继承全局白色，和Bulma原有选择器权重一致，后加载的规则会自动覆盖 */
.title, .subtitle, strong {
  color: inherit;
}

这种写法不会破坏CSS权重规则，后续如果需要给个别元素设置其他文本颜色，正常写对应选择器的样式即可生效。

• 方案2（快速生效，适合简单页面）：给通配符规则添加!important标记，强制提升该规则的优先级，覆盖所有其他同属性样式：

* {
  color: #ffffff !important;
}

注意该方案会强制所有元素文本为白色，后续如果要给特定元素设置其他颜色，对应样式规则也需要添加!important才能生效，不适合结构复杂的页面。

内容的提问来源于stack exchange，提问作者Yves-Marie Ip