table 》 tr 设置样式无效? table tr 这样设置才行，why？

最新推荐文章于 2024-01-23 10:22:17 发布

codingWeb

最新推荐文章于 2024-01-23 10:22:17 发布

阅读量5.2k

点赞数 6

分类专栏：前端 html css 文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/fesfsefgs/article/details/106821753

版权

前端同时被 3 个专栏收录

116 篇文章

订阅专栏

css

17 篇文章

订阅专栏

html

12 篇文章

订阅专栏

本文记录了一个关于HTML table tr 样式设置无效的问题。问题出现在浏览器自动添加了`<tbody>`标签，导致CSS样式未应用到tr上。解决方案是直接针对`<tbody>`或使用`table > tr`选择器来设定样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天碰到的一个问题，之前一直没有注意到，虽然很快找到问题所在了，但感觉有必要记录一下，希望有同样遇到这个问题的小伙伴，但没找到原因的，能看到这篇文章

先来看问题：

html如下： 想让 tr变成红色背景


<style type="text/css">
			table > tr {
				background-color: red;
			}
</style>
<body>
		<table border cellspacing="0" cellpadding="0" id="tab">
			<tr>
				<th>Name</th>
				<th width="200">Quantity</th>
				<th>Price</th>
				<th>Total</th>
				<th>delete</th>
			</tr>
			<tr align="center">
				<td>iphone</td>
				<td width="200">3</td>
				<td>6000</td>
				<td>18000</td>
				<td>
					<a href="">delete</a>
				</td>
			</tr>
		</table>
	</body>

效果：无效
在这里插入图片描述
将css改成如下：

<style type="text/css">
			table tr {
				background-color: red;
			}
</style>

效果，有效
在这里插入图片描述

why？

打开开发者工具，看下dom结构，就明白了
在这里插入图片描述
可以看到table标签后, 又增加了一个新的标签元素<tbody> 这个是浏览器添加的，即使我在代码中没有手动的写<tbody>,此时tr不再是table标签的子元素了，而是后代元素

总结：问题很容易解决也很容易通过开发者工具发现，但如果是前端新人肯定就懵了，特意记录下来，这也是我一直没有注意到的，也给自己涨涨记性