仅内联CSS生效，自定义CSS选择器不生效问题求助

你的CSS规则完全不生效的核心问题是选择器写法错误，把元素的class名当成了HTML标签来使用，导致无法匹配到目标元素。

错误原因分析 #

你HTML中的input元素带有多个class属性：reply、new、writer/content，但你写的CSS规则（比如reply new）是在匹配名为<reply>的标签下的<new>标签，这和你的实际HTML结构完全不符，自然无法生效。

修正后的CSS代码 #

class选择器必须以.开头，同一元素的多个class直接连写（无空格）即可精准匹配：

/* 匹配同时拥有reply、new类的input元素 */
.reply.new {
    display: inline-block;
    height: 5vh;
}
/* 匹配同时拥有reply、new、writer类的input元素 */
.reply.new.writer {
    width: 20px;
}
/* 匹配同时拥有reply、new、content类的input元素 */
.reply.new.content {
    width: 20px;
}

关于内联style的优先级问题 #

内联style属性的优先级远高于外部CSS规则，如果你想让外部CSS覆盖内联样式，有两种方案：

1. 推荐方案：直接移除input元素的内联style="width: 20px"，使用外部CSS统一管理样式，避免样式混乱。
2. 临时方案：在CSS规则中添加!important强制覆盖（不推荐长期使用，会增加样式维护难度）：

.reply.new.writer {
    width: 20px !important;
}

内容的提问来源于stack exchange，提问作者이연준