Question

好的，这是第一次发生在我身上，我曾经在我的机器上使用css locale进行学习，而这次它有一种奇怪的行为（或者我认为是）

当我尝试设置页面样式时，样式不适用于按钮。我一直在寻找很多修复方法，例如使用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的新更新吗？有没有办法使这项工作？

Answer 1

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

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

应该是

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

Answer 2

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

注意你的css评论css评论应该像/* you comment goes here */

并注意你的选择!!在你的CSS中，你在按钮button .btn内选择一个带有btn类的元素，而不是使用.btn类

CSS不覆盖用户代理按钮样式

2 个答案: