Question

我刚刚开始使用Skeleton网格，它对我很好，除了我刚添加了一个表单提交，并且我的提交中添加了一堆奇怪的样式...当我从inspect元素看它时它显示了所有的这个

user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
white-space: pre;
}
user agent stylesheetinput, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}

我如何驾驭这个？

Answer 1

假设我正确理解你在问什么......

这些是用户代理样式。浏览器应用的默认样式。默认样式应用于所有浏览器元素。它们是使h1标签大于h2标签，正文标签块，跨度内联等等的原因......等等......

如果要更改这些样式，则必须覆盖它们。例如：

如果要在提交按钮上编辑填充，可以将其添加到样式表中：

input[type="submit"] {
    padding: 5px 10px;
}

骨架网格用户代理样式表

1 个答案: