具有几个CSS类的HTML超链接不使用所有CSS样式

我有一个简单的HTML页面。有一个宽度为500像素的桌子。该表有一个包含超链接的单元格。超链接应显示为宽度为td宽度100％的块。具有几个CSS类的HTML超链接不使用所有CSS样式

无论如何，超链接不会显示为我想要的。它将显示为内联块，其字体权重为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; 
}

来源

2017-03-15 xms

可能的是painike覆盖其他类。你可以使用！important;命令强制它。 –

@GeneLim这些CSS类应该放在我的CSS文件中的顺序是什么？ – xms

，请更新以下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; 
}

来源

2017-03-15 01:22:09 vishalgelani

字体重量和大小仍然是错误的。 – xms

这是什么问题，以及它如何解决它？ –

请从* a.painike：link，a.painike：visited *，* .painike *中删除'font-weight'和'font-size'样式。 – vishalgelani

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

<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; 
}

来源

2017-03-15 02:19:45 xms

具有几个CSS类的HTML超链接不使用所有CSS样式

回答

相关问题