带有多个CSS类的HTML超链接未使用所有CSS样式

我有一个简单的HTML页面。有一张宽度为500像素的桌子。该表有一个包含超链接的单元格。超链接应显示为宽度为td宽度100%的块

无论如何，超链接不是我想要的显示。它将显示为一个内联块，其字体重量为500，而不是应该的400。同时，字体大小为12像素，而它应该是11像素

我不知道我的HTML和CSS代码有什么问题。也许你知道并且可以帮助我

<table style="width: 500px">
  <tr>
    <td style="width: 100%"><a href="go.html" class="painike painike-hae-muokattavaksi" data-bio="1">Name</a></td>
  </tr>
</table>

.painike {
  box-sizing: content-box;
  height: 18px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 1px;
  padding-bottom: 3px;
  border: none;
  margin: 1px;
  background-color: #323B5A;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #FFFFFF;
  text-decoration: none;
  line-height: 18px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

a.painike:link, a.painike:visited {
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 12px;
  display: inline-block;
}

.painike:active, .painike:hover {
  margin: 1px;
  background-color: #B4166F;
}

.painike.painike-hae-muokattavaksi {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  margin: 0;
  box-sizing: content-box;
  height: 22px;
  line-height: 22px;
  text-align: left;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 400;
  font-size: 11px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

佩尼克先生{
框大小：内容框；
高度：18px；
左侧填充：6px；
右边填充：6px；
垫面：1px；
垫底：3件；
边界：无；
保证金：1px；
背景色：#323B5A；
字体系列：“Exo 2”，塔荷马，无衬线；
字号：500；
字体大小：12px；
颜色：#FFFFFF；
文字装饰：无；
线高：18px；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
}
a、 佩尼克：链接，a。佩尼克：访问{
颜色：#FFFFFF；
文字装饰：无；
字体系列：“Exo 2”，塔荷马，无衬线；
字号：500；
字体大小：12px；
显示：内联块；
}
.painike:活动，.painike:悬停{
保证金：1px；
背景色：#B4166F；
}
painike painike-hae-muokattavaksi{
填充顶部：0；
填充底部：0；
左侧填充：5px；
右侧填充：5px；
位置：相对位置；
排名：0；
左：0；
右：0；
颜色：#FFFFFF；
文字装饰：无；
显示：块；
保证金：0；
框大小：内容框；
高度：22px；
线高：22px；
文本对齐：左对齐；
字体系列：“Exo 2”，塔荷马，无衬线；
字体大小：400；
字体大小：11px；
边界半径：0；
-moz边界半径：0；
-webkit边界半径：0；
}

请更新以下css

.painike.painike-hae-muokattavaksi {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    margin: 0;
    box-sizing: content-box;
    height: 22px;
    line-height: 22px;
    text-align: left;
    font-family: "Exo 2", Tahoma, sans-serif;
    font-weight: 400;
    font-size: 11px;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    width: 100%;
    text-align: center;
}

---

我想我找到了解决办法。这是：

<table style="width: 500px">
  <tr>
    <td style="width: 100%"><a href="go.html" class="painike painike-hae-muokattavaksi" data-bio="1">Name</a></td>
  </tr>
</table>

.painike {
  box-sizing: content-box;
  height: 18px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 1px;
  padding-bottom: 3px;
  border: none;
  margin: 1px;
  background-color: #323B5A;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #FFFFFF;
  text-decoration: none;
  line-height: 18px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

a.painike:link, a.painike:visited {
  color: #FFFFFF;
  text-decoration: none;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 500;
  font-size: 12px;
  display: inline-block;
}

.painike:active, .painike:hover {
  margin: 1px;
  background-color: #B4166F;
}

a.painike.painike-hae-muokattavaksi { /* this was .painike.painike-hae-muokattavaksi */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  margin: 0;
  box-sizing: content-box;
  height: 22px;
  line-height: 22px;
  text-align: left;
  font-family: "Exo 2", Tahoma, sans-serif;
  font-weight: 400;
  font-size: 11px;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

佩尼克先生{
框大小：内容框；
高度：18px；
左侧填充：6px；
右边填充：6px；
垫面：1px；
垫底：3件；
边界：无；
保证金：1px；
背景色：#323B5A；
字体系列：“Exo 2”，塔荷马，无衬线；
字号：500；
字体大小：12px；
颜色：#FFFFFF；
文字装饰：无；
线高：18px；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
}
a、 佩尼克：链接，a。佩尼克：访问{
颜色：#FFFFFF；
文字装饰：无；
字体系列：“Exo 2”，塔荷马，无衬线；
字号：500；
字体大小：12px；
显示：内联块；
}
.painike:活动，.painike:悬停{
保证金：1px；
背景色：#B4166F；
}
a、 painike.painike-hae-muokattavaksi{/*这是.painike.painike-hae-muokattavaksi*/
填充顶部：0；
填充底部：0；
左侧填充：5px；
右侧填充：5px；
位置：相对位置；
排名：0；
左：0；
右：0；
颜色：#FFFFFF；
文字装饰：无；
显示：块；
保证金：0；
框大小：内容框；
高度：22px；
线高：22px；
文本对齐：左对齐；
字体系列：“Exo 2”，塔荷马，无衬线；
字体大小：400；
字体大小：11px；
边界半径：0；
-moz边界半径：0；
-webkit边界半径：0；
}

painike可能会覆盖其他类。你可以用这个！重要的；命令强制执行。@GeneLim这些CSS类在我的CSS文件中的顺序是什么？问题出在哪里？如何解决？请从a.painike:link，a.painike:visted，.painike中删除

font-weight

和

font-size

样式。