CSS不覆盖用户代理按钮样式[重复]答案

【问题标题】：CSS not overriding user agent button style [duplicate]CSS不覆盖用户代理按钮样式[重复]
【发布时间】：2017-04-24 22:29:22
【问题描述】：

好吧，这是我第一次遇到这种情况，我曾经在我的机器中使用 css 语言环境进行学习，这次它的行为很奇怪（或者我认为是）。

当我尝试设置页面样式时，样式不适用于按钮。我一直在寻找很多解决方法，比如使用 reset.css、拼写 <!DOCTYPE html> 对、在我的 css 声明中使用 type="text/css" 等等。

使用内联 css 可以正常工作，但是在 css 文件上编写相同的代码没有效果，奇怪的是其他 css 像表格或页面的其余部分都可以工作。

所以显然我不能覆盖用户代理样式表按钮样式。

这是我的 html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Botões</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" />
  </head>
  <body>
    <div class="container">
      <ul id="flex-container">
        <li>
          <button class="btn normal">Apertar</button>
        </li>
        <li>
          <button class="full">Apertar</button>
        </li>
        <li>
          <button class="block">Apertar</button>
        </li>
        <li>
          <button class="outlined">Apertar</button>
        </li>
        <li>
          <button class="clear">Apertar</button>
        </li>
      </ul>
    </div>
  </body>
</html>

还有我的 CSS 文件：

//PAGE:
html, body {
  height: 100%;
  box-sizing: border-box;
}

.container {
  width: 95%;
  margin: 0 auto;
}

ul#flex-container {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

ul li {
  text-align: center;
  padding: 30px 0;
  width: 20%;
  border: 1px dotted lightgray;
}

// ================================
button.btn {
  font-size: 2.3em;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  cursor: pointer;
}

这是我运行此文件时的控制台输出

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    padding: 1px 6px;
}
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, 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 0em 0em 0em;
    font: 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
user agent stylesheet
button {
    -webkit-appearance: button;
}

我的文件结构如下：

|- index.html
|- css folder
   |- custom.css
   |- reset.css

这就是我的按钮的样子：

那么，如果我总是这样做并且工作正常，为什么我不能覆盖用户代理样式呢？这是新的 Google Chrome 更新吗？有没有办法让这个工作？

【问题讨论】：

标签： html css

【解决方案1】：

正如你所说“使用内联 CSS 工作正常” 但是使用外部样式表不起作用。这是因为用户代理样式表比外部样式表更强大，因此您需要使用!important 关键字来使规则最强大，这应该可以解决问题！。

注意你的css cmets css cmets应该是那个/* you comment goes here */

还要注意你的选择器！！在您的 CSS 中，您正在选择按钮内带有 btn 类的元素 button .btn 使用 .btn 类代替

【讨论】：

【解决方案2】：

您的 CSS cmets 无效。像这样的语法错误通常会破坏它后面的任何属性。

//PAGE:
// ================================

应该是

/* Page: */
/* =============================== */

【讨论】：