html - CSS3 : change width of submit button with class and id

Question

我已经阅读了有关此的其他主题，但是没有人在我的背景下工作。

这就是我想要实现的:

作为 2015 年 7 月 8 日，<button>是 form 的一部分元素 ( link here )。所以我用过:

<li><a href="cve.html">Mi Hoja de Vida - Español (html)</a>
   <div class="formbutton">
      <form action ="yo.png" method="get">
      <button id="spanish" type="submit" class="download">PDF Español</button>
      </form>  
   </div>
   <div class="formbutton">
      <form action ="yo.png" method="get">
        <button id="english" type="submit" class="download">PDF English</button>
      </form>  
    </div>
 </li>

然后我尝试修改按钮的宽度:a) 使用 class="download" b) 使用 id="spanish"和 id="english" .

但是单独使用它们并没有达到我的预期。

使用class = "download"

.download {
   width: 120px;
   height: auto;
   font-family: "Verdana";
   text-align: center;
}

使用 class="donwload"的结果:

在 CSS 中，我也尝试过使用 ID:

#spanish {
    display:block;
    width: 120px;
    text-align: center;
}



#english {
    display:block;
    width: 120px;
    text-align: center;
}

使用 ID 的结果:

最后，我使用类和 ID 使其正常工作。但是不知道为什么会这样。对我来说，最好使用其中之一(类或 ID)。任何人都可以向我解释这种行为吗？

Answer 1

您似乎遇到了特异性问题。如果您使用了 !important，则只有 id 或只有 class 可能会起作用。因为您试图在不使用 !important 的情况下覆盖其他 CSS 规则，所以您的规则必须比预先存在的规则更具体。

您可以在这里阅读更多内容:http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

例子:

div p.stuff {
  color: green;
  background: gray;
  display: block;
  width: 50%;
  height: 40px;
  text-align: center;
  font-size: 20px;
  padding-top: 20px;
}

div p#internal {
  color: white;
  background: black;
  width: 100%;
  height: 175px;
  padding-top: 155px;
}

<div id="container"><p class="stuff" id="internal">Testing<p></div>