CSS樣式未應用
[英]CSS styles does not get applied
問題描述
我想為表格的第一行應用背景色。 我給該行加了一個特殊的類名。 我還想為表的其余行應用其他顏色。 行顏色不會被應用。
.table { font-family: sans-serif; width: auto; overflow: auto; display: block; border: 1; } /*I want the row with class head to be this color*/ .head { background-color: yellow; } /*I want the rest of the table rows this color*/ .table td { background-color: lightblue; }
<html> <head> <link rel="stylesheet" type="text/css" href="new-style.css"> <meta charset="UTF-8"> </head> <body id="body"> <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table"> <tr id="head" class="head"> <td class="head">Name</td> <td class="head">Type</td> </tr> <tr id="initial-row"> <td width=200> text here</td> <td width=200> text here </td> </tr> <tr id="second-row"> <td width=200> text here </td> <td width=200>text here </td> </tr> </table> </body> </html>
7 個解決方案
解決方案1
2 已采納 2017-05-31 08:10:40
您的問題在於特異性和順序-因為您將淺藍色放在td ，所以您也需要用黃色在td上覆蓋它。
然后，您需要將黃色聲明移到初始聲明下方，因為它具有相同的特異性-這意味着語句的順序很重要。
最后一件事-從表中刪除display:block ，否則將破壞表的布局。
.table { font-family: sans-serif; width: auto; overflow: auto; border: 1; width:100%; /* remove display block from here otherwise your table layout will break */ } /*put this first*/ .table td { background-color: lightblue; } /*override with this*/ .head td { background-color: yellow; }
<html> <head> <link rel="stylesheet" type="text/css" href="new-style.css"> <meta charset="UTF-8"> </head> <body id="body"> <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table"> <tr id="head" class="head"> <td class="head">Name</td> <td class="head">Type</td> </tr> <tr id="initial-row"> <td width=200> text here</td> <td width=200> text here </td> </tr> <tr id="second-row"> <td width=200> text here </td> <td width=200>text here </td> </tr> </table> </body> </html>
解決方案2
1 2017-05-31 08:12:01
讓Pete着迷的是 ，我想說的是，如果您想創建一個表頭以使用正確的標簽<th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<th>標記定義HTML表中的標題單元格。HTML表具有兩種單元格：
標題單元格-包含標題信息（使用元素創建）
標准單元格-包含數據（使用元素創建）元素中的文本默認為粗體並居中。
.table { font-family: sans-serif; width: auto; overflow: auto; display: block; border: 1; } /*I want the row with class head to be this color*/ th { background-color: yellow; } /*I want the rest of the table rows this color*/ .table td { background-color: lightblue; }
<html> <head> <link rel="stylesheet" type="text/css" href="new-style.css"> <meta charset="UTF-8"> </head> <body id="body"> <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table"> <tr id="head" class="head"> <th class="head">Name</th> <th class="head">Type</th> </tr> <tr id="initial-row"> <td width=200> text here</td> <td width=200> text here </td> </tr> <tr id="second-row"> <td width=200> text here </td> <td width=200>text here </td> </tr> </table> </body> </html>
解決方案3
1 2017-05-31 08:13:35
一個解決方案是增加的特異性為CSS設置的.head
.table { font-family: sans-serif; width: auto; overflow: auto; display: block; border: 1; } /*I want the row with class head to be this color*/ .table .head { background-color: yellow; } /*I want the rest of the table rows this color*/ .table td { background-color: lightblue; }
<html> <head> <link rel="stylesheet" type="text/css" href="new-style.css"> <meta charset="UTF-8"> </head> <body id="body"> <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table"> <tr id="head" class="head"> <td class="head">Name</td> <td class="head">Type</td> </tr> <tr id="initial-row"> <td width=200> text here</td> <td width=200 > text here </td> </tr> <tr id="second-row"> <td width=200 > text here </td> <td width=200 >text here </td> </tr> </table> </body> </html>
順便說一句，我剛剛注意到您將table用作類，也許您應該使用其他名稱...更具體
解決方案4
0 2017-05-31 08:06:42
刪除tr的類head ，然后添加!important 。 由於某些原因，即使我重新排列了CSS，顏色也不會沒有!important改變
.table { font-family: sans-serif; width: auto; overflow: auto; display: block; border: 1; } /*I want the row with class head to be this color*/ .head { background-color: yellow !important; } /*I want the rest of the table rows this color*/ .table td { background-color: lightblue; }
<body id="body"> <table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table"> <tr id="head"> <td class="head">Name</td> <td class="head">Type</td> </tr> <tr id="initial-row"> <td width=200> text here</td> <td width=200> text here </td> </tr> <tr id="second-row"> <td width=200> text here </td> <td width=200>text here </td> </tr> </table> </body>
解決方案5
0 2017-05-31 08:12:07
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
CSS：
th{
background-color: yellow;
}
解決方案6
0 2017-05-31 08:29:45
如@Pete所述，您的特異性不正確。 附帶一提，您可以改進HTML標記以同時使用<thead> ，然后CSS可以僅將<thead>內的<thead> <th>元素作為目標。 這對於可訪問性更好，因為它明確將“ head”定義為表頭。
查看<table>標記上的w3c文檔以獲取可訪問性@ https://www.w3.org/WAI/tutorials/tables/或有關該標記的一般信息，請查看驚人的Mozilla文檔@ https：// developer .mozilla.org / en / docs / Web / HTML / Element / table
像這樣：
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
解決方案7
-1 2017-05-31 08:12:18
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
我認為應該是上面的代碼。
無需類聲明即可應用CSS樣式
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.