为什么子选择器不起作用？答案

【问题标题】：Why child selector doesn't work?为什么子选择器不起作用？
【发布时间】：2018-04-30 13:52:22
【问题描述】：

我只是想知道为什么子选择器在 .nav1 和 tr:last-child 之间不起作用，但是当我使用 .nav1 tr:last-child 时它起作用了，是不是子选择器被认为是后代选择器，所以它应该适用于两种代码或:last-child 需要特殊处理吗？

代码如下：

.nav1 td {
  background-color: #5d93ea;
  padding: 30px 60px;
  border-radius: 20px;
}


/*it works when using:  .nav1 > tr:last-child > td   */

.nav1>tr:last-child>td {
  border-radius: 20px 20px 0px 0px;
}

a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  color: black;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<table cellspacing="10px" class="nav1">
  <tr>
    <td><a href="#">1</a></td>
    <td><a href="#">2</a></td>
    <td><a href="#">3</a></td>
    <td><a href="#">4</a></td>
  </tr>
  <tr>
    <td><a href="#">1</a></td>
    <td><a href="#">2</a></td>
    <td><a href="#">3</a></td>
    <td><a href="#">4</a></td>
  </tr>
</table>

【问题讨论】：

<tr> 不应该是 <table> 的直接后代，并且（某些？）浏览器通过使用 <tbody> 隐式包装行来解决此问题。
@pawel 错了。 <tr> 是 <table> 的孩子完全没有错
@JonathanNicol 不确定谁觉得您的评论有用。检查我的答案，了解两者之间的区别。
@j08691 然后向浏览器供应商提交错误报告，他们决定用 tbody 包装行。
@pawel。这不是 j08691 的重点。什么是有效的 HTML，以及浏览器如何处理 HTML，在 HTML 规范中是两个完全不同的东西。 j08691 的观点是 tr 元素作为表元素的子元素是完全有效的。您引用的内容来自描述浏览器解析器如何以 text/html 语法处理 HTML 的部分。浏览器也可以用application/xhtml+xml 语法解析HTML。在那里，tbody 元素不会被自动添加，tr 将是表的子元素，这是完全有效的。表格的有效子 tr 也可以在 JavaScript 中构造。

标签： html css css-selectors

【解决方案1】：

谷歌浏览器和其他遵循标准的浏览器添加<tbody>标签：

您可以在开发工具中看到它们。所以你可能需要使用：

.nav1 > tbody > tr:last-child > td {

预览

没有> tbody >：

与> tbody >:

【讨论】：

我认为 tbody 对子选择器没有任何影响？ .nav1 > tr 应该仍然可以工作。
@JonathanNicol 是的，确实如此。发布预览。
@Jonathan：为什么在忽略 <tbody> 元素的特定情况下，您认为直接子组合子将不再适用？
对不起，你说得很对，我误解了这个问题。给我点赞。
谢谢@PraveenKumar 你实际上在我脑海中清除了很多东西，但说实话太奇怪了！