Question

坚持了好几个小时。每当我尝试为按钮.btn设置自定义类时，我都会收到以下内容。该类适用于任何<a>元素，但表单内的任何按钮（<button>或<input type="submit">）都会被忽略。被忽略我的意思是在Chrome开发工具中，这个类甚至都没有。 !important没有任何区别，因此这不是特异性问题。这很奇怪，因为正在应用按钮修饰符（我使用BEM）.btn--black。我使用SASS，Webpack和React，如果这有任何区别的话。

用户代理风格

input[type="button" i], input[type="submit" i], input[type="reset" i], 
input[type="file" i]::-webkit-file-upload-button, button {
   border-color: rgb(216, 216, 216) rgb(209, 209, 209) rgb(186, 186, 186);
   border-style: solid;
   border-width: 1px;
   padding: 1px 7px 2px;
}
user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], 
input[type="file" i]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
background-color: buttonface;
box-sizing: border-box;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
}
user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i] {
-webkit-appearance: push-button;
user-select: none;
white-space: pre;
}
user agent stylesheet
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb !important;
}

Answer 1

现在解决了。

我只是看了处理过的CSS文件，发现我只编写了btn:link和btn:visited的样式，这些样式适用于<a>元素，因为这些是默认状态。

对于button元素，btn类本身也需要我只给予伪类的样式，否则将应用浏览器默认值。希望这可以帮助遇到与我相同问题的人。

无法覆盖用户代理

1 个答案: