CSS 选择器没有效果

Question

这是一个糟糕的问题，我真的很抱歉提出这个问题。 但是我已经编写 PHP 几个小时了，现在试图在一个简单的 html 布局上显示它。 我需要更多的咖啡，我的眼睛很累，醒得太早了...

无论如何，问题是，出于某种原因，我应该影响文本样式的 css 样式对布局没有任何影响。 边框设置和填充确实有效，但字体粗细或背景颜色无效，这有点奇怪。

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Visitor logs</title> <style> html { } body { } .first_row { font-weight: bold; background-color: red; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; } </style> </head> <body> <table> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> </table> </body> </html>

Answer 1

添加此代码：

table {
    border-collapse: collapse;
}

 table { border-collapse: collapse; } .first_row { font-weight: bold; background-color: red; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }

 <table> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> <tr class="second_row"> <td>IP-address2</td> <td>Last visited2</td> <td>Rough location2</td> </tr> </table>

另见：

 table { border-collapse: collapse; } .first_row { font-weight: bold; background-color: red; } tr:not(.first_row) td:not(:first-child) { border-left: 1px solid #000; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }

 <table> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> <tr class="second_row"> <td>IP-address2</td> <td>Last visited2</td> <td>Rough location2</td> </tr> </table>

Answer 2

您可以将thead与th用于表格标题

 table { border-collapse: collapse; } table th { font-weight: bold; background: red; padding:4px; border-bottom: 1px solid black; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Visitor logs</title> </head> <body> <table> <thead> <tr> <th>IP-address</th> <th>Last visited</th> <th>Rough location</th> </tr> </thead> <tr> <td>text</td> <td>text</td> <td>text</td> </tr> </table> </body> </html>

Answer 3

在表格标签中添加cellpacing="0" cellpadding="0"或在您的 css 中添加table{border-collapse: collapse;} 。

 .first_row { font-weight: bold; background-color: red; } td { padding: 4px 8px 4px 4px; border-bottom: 1px solid black; }

 <table cellspacing="0" cellpadding="0"> <tr class="first_row"> <td>IP-address</td> <td>Last visited</td> <td>Rough location</td> </tr> </table>

CSS 选择器没有效果

问题描述

3 个解决方案

解决方案1
2 2017-10-04 04:26:13

解决方案2
0 2017-10-04 04:53:18

解决方案3
-1 2017-10-04 04:46:20

CSS 选择器没有效果

问题描述

3 个解决方案

解决方案1 2 2017-10-04 04:26:13

解决方案2 0 2017-10-04 04:53:18

解决方案3 -1 2017-10-04 04:46:20

解决方案1
2 2017-10-04 04:26:13

解决方案2
0 2017-10-04 04:53:18

解决方案3
-1 2017-10-04 04:46:20