如何獲得帶有屬性的第一個孩子（td）？

Question

我需要使用我的屬性來設置第一個表格行，但我無法弄清楚。

請看看代碼 - 任何想法爲什麼「藍色」行不是藍色？

謝謝。

#myTable tr[data-somedata] > td { 
 
    background-color: red; 
 
} 
 

 
#myTable tr[data-somedata] > td ~ #myTable tr[data-somedata] > td { 
 
    background-color: blue; 
 
}

<table id='myTable'> 
 
    <tr> 
 
    <td>This should be normal</td> 
 
    </tr> 
 
    <tr> 
 
    <td>This should be normal</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be red</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be blue</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be blue</td> 
 
    </tr> 
 
</table>

Answer 1

這是因爲你的選擇會爲td兄弟姐妹的工作，但td這裏都沒有兄弟姐妹，兄弟姐妹都tr。所以你必須修復你的選擇器與兄弟tr一起工作，然後應用後代或子選擇器。

#myTable tr[data-somedata] > td { 
 
    background-color: red; 
 
} 
 

 
#myTable tr[data-somedata] ~ tr[data-somedata] > td { 
 
    background-color: blue; 
 
}

<table id='myTable'> 
 
    <tr> 
 
    <td>This should be normal</td> 
 
    </tr> 
 
    <tr> 
 
    <td>This should be normal</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be red</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be blue</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be blue</td> 
 
    </tr> 
 
</table>

Answer 2

你已經走錯了路在你選擇跟隨。 tr正在s，中，您需要選擇下一個：tr ~tr。

#myTable tr[data-somedata] > td { 
 
    background-color: red; 
 
} 
 

 
#myTable tr[data-somedata] ~ tr[data-somedata] > td { 
 
    background-color: blue; 
 
}

<table id='myTable'> 
 
    <tr> 
 
    <td>This should be normal</td> 
 
    </tr> 
 
    <tr> 
 
    <td>This should be normal</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be red</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be blue</td> 
 
    </tr> 
 
    <tr data-somedata> 
 
    <td>This should be blue</td> 
 
    </tr> 
 
</table>

您選擇

#myTable tr[data-somedata] > td ~ #myTable tr[data-somedata] > td 

正在尋找與表的屬性數據somedata孩子TR內的TD（#myTable）WICH矗立着TD內跟隨另TD那是站在一個tr屬性data-somedata自己的孩子的#myTable ...有點太多了在這裏:)