[問題] Child combinator >

[kisha024 (4545454554)]

各位好

https://jsfiddle.net/rxd8eyw1/
如上連結

 table > tr {
    color: red;
 }

  <table>
    <tr>
      <th></th>
      <th scope="col">國文</th>
      <th scope="col">英文</th>
      <th scope="col">數學</th>
    </tr>
    <tr>
      <th scope="row">張三</th>
      <td>78</td>
      <td>60</td>
      <td>98</td>
    </tr>
    <tr>
      <th scope="row">李四</th>
      <td>67</td>
      <td>65</td>
      <td>85</td>
    </tr>
    <tr>
      <th scope="row">王五</th>
      <td>69</td>
      <td>85</td>
      <td>45</td>
    </tr>
  </table>


https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

在HTML的結構上 tr 應該是 table 的 direct child 吧

但 table > tr 這樣寫，好像沒 match 到 tr

我知道可以用 table tr， 但為什麼 table > tr 不行呢？

謝謝

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.138.40.245 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1688449133.A.410.html
推 nick8195: 雖然html當中沒有使用，但結構上table底下還有tbody
→ nick8195: 改成table>tbody>tr就能達到效果了
推 qptw: >是子代，也就是TABLE裡面第一子層必須是TR，而空格則是後代
→ qptw: 的概念，TABLE 裡面可以隔著別人，只要找到TR就可以了
→ microloft: 承1樓，就算你沒寫tbody，瀏覽器還是會自動幫你加
謝謝大家 原來是tbody  突然有種「看不見,可是你依然存在」的感覺
※ 編輯: kisha024 (223.138.40.245 臺灣), 07/04/2023 15:41:15
推 nottt: https://i.imgur.com/gyjgenB.png 不要相信自己的原始碼
→ nottt: 以瀏覽器渲染出來的為主，因為可能被js或其他外掛更換html