如何获得带有属性的第一个孩子（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 ...有点太多了在这里:)