英文:
nth-child does not work with table elements
问题
使用nth-child(1)在表格上时，为什么样式不仅应用于第一个单元格？
<!DOCTYPE html>
<html>
<head>
<style>
.header:nth-child(1) {
background: lightgreen;
}
</style>
</head>
<body>
<table>
<tr class="header">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
英文:
When using :nth-child(1) on a table, Why does the style not only apply to the first cell?
<!DOCTYPE html>
<html>
<head>
<style>
.header:nth-child(1) {
background: lightgreen;
}
</style>
</head>
<body>
<table>
<tr class="header">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
答案1
得分: 0
可能需要声明元素选择器来应用样式。
<style>
.header > :nth-child(1) {
background: lightgreen;
}
</style>
英文:
you probably need to declare the element selector for applying styles.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<style>
.header > :nth-child(1) {
background: lightgreen;
}
</style>
</head>
<body>
<table>
<tr class="header">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论