html - 造型一个直接的 child

标签 html css html-table

<!DOCTYPE html>    
<html>
  <head>
    <style>
      tbody > tr {
        color: grey
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr><th colspan="2">Favourite films</th></tr>
        <tr><th>Title</th><th>Year</th></tr>
      </thead>
      <tbody>
        <tr><td>The Shawshank Redemption</td><td>1994</td></tr>
        <div>
          <tr><td>Django Unchained</td><td>2012</td></tr>
          <tr><td>Candyman</td><td>1992</td></tr>
        </div>
      </tbody>
    </table>

为什么 div 内的行变得太灰?我写的是 tbody > tr,而不是 tbody tr,所以只有第一行,即 tbody 的直接子级,应该变成灰色。

最佳答案

来自manual :

  • 允许的内容:零个或多个<tr>元素。

因此您的浏览器忽略了您的 div<tbody>里面元素

你可以试试下面的方法

tbody > tr:first-of-type

Example

你也可以使用:

tbody > tr:nth-child(1)

Example

关于html - 造型一个直接的 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23916478/

相关文章:

jquery - 如何在 FullCalendar 中使用 'eventMouseout' 回调?

javascript - 有没有办法阻止隐藏文本在加载时出现然后消失?

javascript - 出现滚动条时全 Angular 标题移动

javascript - CSS 样式 td 元素取决于 td 宽度

javascript - 使当前 HTML 行可编辑

javascript - 在单独的页面中打印 Javascript?

javascript - 为什么在应用 footable 样式之前显示未样式表一秒钟?

javascript - html/css/javascript 元素模块化最佳实践

css - Angular 4.x - CSS 背景颜色不改变 IE11

css - 创建 iOS 风格的后退按钮