CSS样式未应用
[英]CSS styles does not get applied
问题描述
I want to apply a background color for the first row in the table. 
我想为表格的第一行应用背景色。 I gave that row a special class name. 我给该行加了一个特殊的类名。 I also want to apply another color for the rest of the table's rows. 我还想为表的其余行应用其他颜色。 The row colors do 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
You're problem is with specificity and order - as you have put the light blue on the td , you need to override that with the yellow on the td too. 您的问题在于特异性和顺序-因为您将浅蓝色放在td ，所以您也需要用黄色在td上覆盖它。
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter. 然后，您需要将黄色声明移到初始声明下方，因为它具有相同的特异性-这意味着语句的顺序很重要。
One final thing - remove display:block from the table, otherwise you will break the layout of the table. 最后一件事-从表中删除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
In addiction to Pete's answer , I would like to say that if you want to create a table header to use the proper tag <th> 让Pete着迷的是 ，我想说的是，如果您想创建一个表头以使用正确的标签<th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The
<th>tag defines a header cell in an HTML table.<th>标记定义HTML表中的标题单元格。An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.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
One solution is to increase the specificity of the CSS settings for .head 一个解决方案是增加的特异性为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>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific 顺便说一句，我刚刚注意到您将table用作类，也许您应该使用其他名称...更具体
解决方案4
0 2017-05-31 08:06:42
Remove the class head in the tr then add !important . 删除tr的类head ，然后添加!important 。 For some reason the color is not changing without !important even if I re-arranged the css 由于某些原因，即使我重新排列了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: CSS：
th{
background-color: yellow;
}
解决方案6
0 2017-05-31 08:29:45
As @Pete mentioned, your specificity is incorrect. 如@Pete所述，您的特异性不正确。 On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead> . 附带一提，您可以改进HTML标记以同时使用<thead> ，然后CSS可以仅将<thead>内的<thead> <th>元素作为目标。 This is better for accessibility as it clearly defines you "head" as a table header. 这对于可访问性更好，因为它明确将“ head”定义为表头。
Take a look at the w3c docs on <table> markup for accessibilty @ https://www.w3.org/WAI/tutorials/tables/ or for general information about the markup check out the amazing Mozilla documentation @ https://developer.mozilla.org/en/docs/Web/HTML/Element/table 查看<table>标记上的w3c文档以获取可访问性@ https://www.w3.org/WAI/tutorials/tables/或有关该标记的一般信息，请查看惊人的Mozilla文档@ https：// developer .mozilla.org / en / docs / Web / HTML / Element / table
Something like this: 像这样：
.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;
}
I think that should be codes above. 我认为应该是上面的代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.