Question

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
table > tr > th {
	color: red;
}
</style>
</head>
<body>
<table>
	<tr>
		<th>a</th>
		<th>b</th>
	</tr>
</table>
</body>
</html>

＆＃13;

我无法理解为什么单元格中的文字不是红色的。你能告诉我我错过了什么。

Answer 1

你有什么是表头。首先，如果您需要表格单元格，请使用<td>标记。您不必使用table > tr > td。如果要为特定单元格着色，请使用类来标识它们：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.cells {
    color: red;
}
</style>
</head>
<body>
<table>
	<tr>
		<td class="cells">a</td>
		<td class="cells">b</td>
	</tr>
</table>
</body>
</html>

＆＃13;

如果没有，只需使用标签：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
td {
	color: red;
}
</style>
</head>
<body>
<table>
	<tr>
		<td>a</td>
		<td>b</td>
	</tr>
</table>
</body>
</html>

＆＃13;

我希望这就是你想要的。

Answer 2

请尝试使用table tr th代替table > tr > th，因为tbody元素已被浏览器添加为tr的父元素，因为direct child selector {{1使用它时，它不会设置>

的样式

＆＃13;

th

＆＃13;

table tr th {
  color: red;
}

＆＃13;

CSS立即子选择器未选择

2 个答案: