作者kisha024 (4545454554)
看板Web_Design
標題[問題] Child combinator >
時間Tue Jul 4 13:38:51 2023
各位好
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1688449133.A.410.html
1F：推 nick8195: 雖然html當中沒有使用，但結構上table底下還有tbody 07/04 13:46
2F：→ nick8195: 改成table>tbody>tr就能達到效果了 07/04 13:47
3F：推 qptw: >是子代，也就是TABLE裡面第一子層必須是TR，而空格則是後代 07/04 15:02
4F：→ qptw: 的概念，TABLE 裡面可以隔著別人，只要找到TR就可以了 07/04 15:03
5F：→ microloft: 承1樓，就算你沒寫tbody，瀏覽器還是會自動幫你加 07/04 15:28
謝謝大家 原來是tbody 突然有種「看不見,可是你依然存在」的感覺
※ 編輯: kisha024 (223.138.40.245 臺灣), 07/04/2023 15:41:15
7F：→ nottt: 以瀏覽器渲染出來的為主，因為可能被js或其他外掛更換html 07/04 16:33