为何ID选择器CSS可居中Material Design文本框，类选择器无效？

核心原因很简单：CSS选择器的优先级（Specificity）差异。让我给你拆解清楚：

• 首先，CSS有一套明确的优先级计算规则：ID选择器（比如#textfeild）的权重是100，类选择器（比如.steps_div）是10，元素选择器（比如div）是1。所以你写的div#textfeild总权重是1+100=101，而.steps_div只有10。
• 你用的是MDC文本框组件，它自带的默认样式里肯定有针对.mdc-text-field的布局设置（比如默认是display: inline-block，或者margin有默认值）。当你用.steps_div去设置margin: 0 auto和display: block时，它的权重和MDC自带的.mdc-text-field样式权重相同（都是10）。如果MDC的样式文件在你的自定义CSS之后加载，或者框架里有更具体的选择器，你的类样式就会被默认样式覆盖，自然无法生效。
• 而div#textfeild的权重高得多（101），只要MDC没有用!important这种强制覆盖的写法（一般组件库不会这么做），它就能轻松覆盖掉默认的冲突样式，让你的居中设置生效。

替代方案（不用ID也能实现） #

如果你不想依赖ID选择器，可以提升类选择器的优先级，比如把选择器写成：

.mdc-text-field.steps_div {
  display: block;
  width: 250px;
  margin: 0 auto;
}

这样总权重是10+10=20，比单个.mdc-text-field的权重高，就能覆盖默认样式，实现居中效果了。

内容的提问来源于stack exchange，提问作者Enzo Damato