选择类X的第n个元素 [英] Selecting the nth-element of class X
本文介绍了选择类X的第n个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何只使用CSS 3选择器来选择X类的第n个元素？具体来说，我需要选择表中的每个偶数表行以应用样式，但有时候我插入需要被忽略的表行，因为它不是数据。
我尝试使用
tr.X：nth-child even）
.X :: nth-child（even）
code>：nth-of-type（）存在，但这两个都不符合我的要求。
用纯CSS3实现这个？
HTML表格
pre>
< table class =txls>
< thead class =centro>
< tr class =bg-gris>
< td class =txlsbrowspan =2width =14& nbsp;< / td>
< td class =txlsbrowspan =2> Linea< / td>
< td class =txlsbcolspan =7> Kilometros< / td>
< / tr>
< tr class =bg-gris>
< td class =txlsbwidth =100> Atenci& oacute; n< / td>
< td class =txlsbwidth =100> Derecho de via< / td>
< td class =txlsbwidth =100> Administrativos< / td>
< td class =txlsbwidth =100> Contencioso< / td>
< td class =txlsbwidth =100> Expropiados< / td>
< td class =txlsbwidth =100> Construccion< / td>
< td class =txlsbwidth =100> Regularizados< / td>
< / tr>
< / thead>
< tbody>
< tr class =X>
< td class =txlsb>< img src =imgs / collapse-medium-green.png/>< / td>
< td class =txlsb> XXX-45820-YYY< / td>
< td class =txlsb> 12.50< / td>
< td class =txlsb> 60.12< / td>
< td class =txlsb> 8.00< / td>
< td class =txlsb> 10.00< / td>
< td class =txlsb> 0.00< / td>
< td class =txlsb> 0.00< / td>
< td class =txlsb> 18.00< / td>
< / tr>
< tr>
< td class =txlsb bg-cancel>& nbsp;< / td>
< td class =txlsccolspan =8>
< table class =txls w100>
< thead>
< tr class =bg-verde2>
< td class =txlsbwidth =14>< img src =imgs / collapse-medium-green.png/>< / td>
< td class =txlsb> Zona Foo< / td>
< td class =txlsbwidth =100> 3.00< / td>
< td class =txlsbwidth =100> 1.00< / td>
< td class =txlsbwidth =100> 0.00< / td>
< td class =txlsbwidth =100> 0.00< / td>
< td class =txlsbwidth =98> 4.00< / td>
< / tr>
< / thead>
< tbody class =>
< tr>
< td class =txlsb bg-cancel>& nbsp;< / td>
< td class =txlsccolspan =6>
< table class =txls w100>
< thead class =centro>
< tr class =bg-gris2>
< td class =txlsbwidth =100> Tramite< / td>
< td class =txlsb> Caso< / td>
< td class =txlsb> Expediente< / td>
< td class =txlsb> Predio< / td>
< td class =txlsbwidth =55> T。内部< / td>
< td class =txlsbwidth =55> T。最终< / td>
< td class =txlsb bg-cancelwidth =96>& nbsp;< / td>
< / tr>
< / thead>
< tbody>
< tr class =X>
< td class =txlsb>管理员< / td>
< td class =txlsb> 12< / td>
< td class =txlsb> YC-AGR-12390-2011< / td>
< td class =txlsb> la chuchita< / td>
< td class =txlsb> 12.1< / td>
< td class =txlsb> 25.0< / td>
< td class =txlsb> 3.00< / td>
< / td>
< tr class =X>
< td class =txlsb> Contencioso< / td>
< td class =txlsb> 13< / td>
< td class =txlsb> YC-AGR-52323-2011< / td>
< td class =txlsb> el almendro< / td>
< td class =txlsb> 50.0< / td>
< td class =txlsb> 51.0< / td>
< td class =txlsb> 1.00< / td>
< / td>
< / tbody>
< / table>
< / td>
< / td>
< / tbody>
< / table>
< / td>
< / tr>
< tr class =X>
< td class =txlsb>< img src =imgs / expand-medium-green.png/>< / td>
< td class =txlsb> AAA-83010-BBB< / td>
< td class =txlsb> 50.92< / td>
< td class =txlsb> 92.45< / td>
< td class =txlsb> 10.08< / td>
< td class =txlsb> 0.00< / td>
< td class =txlsb> 0.00< / td>
< td class =txlsb> 0.00< / td>
< td class =txlsb> 0.00< / td>
< / tr>
< / tbody>
< / table>
解决方案
CSS4规范调用：nth-match（）伪选择器，目前没有一个可用的。所有当前伪选择器都在它可以在当前分支中查看的所有元素的上下文中。 nth-child（even）仅适用于 tr ，而不是。 X 。
How can I select the nth-element of a X class using only CSS 3 selectors? Specifically, i need to select each even table row in a table to apply a style, but sometimes i insert a table row that needs to be ignored because it isn't data.
I tried using
tr.X:nth-child(even)
.X::nth-child(even)
and i know that :nth-of-type() exists but neither of those seems to fulfill my requirements.
Is it possible to achieve this with pure CSS3 ? If not i don't really mind, but i'll be glad to hear your ideas.
HTML table
<table class="txls">
<thead class="centro">
<tr class="bg-gris">
<td class="txlsb" rowspan="2" width="14"> </td>
<td class="txlsb" rowspan="2">Linea</td>
<td class="txlsb" colspan="7">Kilometros</td>
</tr>
<tr class="bg-gris">
<td class="txlsb" width="100">Atención</td>
<td class="txlsb" width="100">Derecho de via</td>
<td class="txlsb" width="100">Administrativos</td>
<td class="txlsb" width="100">Contencioso</td>
<td class="txlsb" width="100">Expropiados</td>
<td class="txlsb" width="100">Construccion</td>
<td class="txlsb" width="100">Regularizados</td>
</tr>
</thead>
<tbody>
<tr class="X">
<td class="txlsb"><img src="imgs/collapse-medium-green.png" /></td>
<td class="txlsb">XXX-45820-YYY</td>
<td class="txlsb">12.50</td>
<td class="txlsb">60.12</td>
<td class="txlsb">8.00</td>
<td class="txlsb">10.00</td>
<td class="txlsb">0.00</td>
<td class="txlsb">0.00</td>
<td class="txlsb">18.00</td>
</tr>
<tr >
<td class="txlsb bg-cancel"> </td>
<td class="txlsc" colspan="8">
<table class="txls w100">
<thead>
<tr class="bg-verde2">
<td class="txlsb" width="14"><img src="imgs/collapse-medium-green.png" /></td>
<td class="txlsb">Zona Foo</td>
<td class="txlsb" width="100">3.00</td>
<td class="txlsb" width="100">1.00</td>
<td class="txlsb" width="100">0.00</td>
<td class="txlsb" width="100">0.00</td>
<td class="txlsb" width="98">4.00</td>
</tr>
</thead>
<tbody class="">
<tr>
<td class="txlsb bg-cancel"> </td>
<td class="txlsc" colspan="6">
<table class="txls w100">
<thead class="centro">
<tr class="bg-gris2">
<td class="txlsb" width="100">Tramite</td>
<td class="txlsb">Num. Caso</td>
<td class="txlsb">Expediente</td>
<td class="txlsb">Predio</td>
<td class="txlsb" width="55">T. Inicial</td>
<td class="txlsb" width="55">T. Final</td>
<td class="txlsb bg-cancel" width="96"> </td>
</tr>
</thead>
<tbody>
<tr class="X">
<td class="txlsb">Administrativo</td>
<td class="txlsb">12</td>
<td class="txlsb">YC-AGR-12390-2011</td>
<td class="txlsb">la chuchita</td>
<td class="txlsb">12.1</td>
<td class="txlsb">25.0</td>
<td class="txlsb">3.00</td>
</td>
<tr class="X">
<td class="txlsb">Contencioso</td>
<td class="txlsb">13</td>
<td class="txlsb">YC-AGR-52323-2011</td>
<td class="txlsb">el almendro</td>
<td class="txlsb">50.0</td>
<td class="txlsb">51.0</td>
<td class="txlsb">1.00</td>
</td>
</tbody>
</table>
</td>
</td>
</tbody>
</table>
</td>
</tr>
<tr class="X">
<td class="txlsb"><img src="imgs/expand-medium-green.png" /></td>
<td class="txlsb">AAA-83010-BBB</td>
<td class="txlsb">50.92</td>
<td class="txlsb">92.45</td>
<td class="txlsb">10.08</td>
<td class="txlsb">0.00</td>
<td class="txlsb">0.00</td>
<td class="txlsb">0.00</td>
<td class="txlsb">0.00</td>
</tr>
</tbody>
</table>
解决方案
The CSS4 specifications call for the :nth-match() pseudo-selectors, but at the present time there is not one available for use. All the current pseudo-selectors are in the context of all elements that it can look at in the current branch. The nth-child(even) is only being applied to the tr and not the .X.
这篇关于选择类X的第n个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
