具有幾個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樣式

回答

相關問題