Html 如何定义css规则以查找一组类中的第一个和最后一个

我有以下标记结构。它有一组tr，其类别与grp320、grp321和grp322相同

    <tr class="grp320"><td colspan="8">Some Data</td></tr>
    <tr class="grp320"><td colspan="8">Some Data</td></tr>
    <tr class="grp320"><td colspan="8">Some Data</td></tr>

    <tr class="grp321"><td colspan="8">Some Data</td></tr>
    <tr class="grp321"><td colspan="8">Some Data</td></tr>
    <tr class="grp321"><td colspan="8">Some Data</td></tr>

    <tr class="grp322"><td colspan="8">Some Data</td></tr>
    <tr class="grp322"><td colspan="8">Some Data</td></tr>
    <tr class="grp322"><td colspan="8">Some Data</td></tr>

一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据
一些数据

我如何定义一个CSS规则来应用样式，并按CSS类和最后一个伪元素分组

希望在具有相同CSS类的tr之间添加边框

这是仅使用css实现的还是我必须更改标记

Edit:是否可以使用通配符选择器定义css规则，如

tr[class^=grp]

与定义所有.grp_uuu类不同

澄清：我想在组（.grp_）的每一行添加一个边框底部，不包括组的第一个和最后一个项目（tr）。

尝试以下操作：

table tr.grp322:last-child td {color:#f00;}

或

---

问题还不太清楚，但你是说这个吗

表格{
边界间距：0；
}
tr[class^='grp']：不是（：第一个孩子）td{
边框顶部：1px实心
}
表.grp320+.grp321 td，
表.grp321+.grp322 td{
边界顶部：无；
}

grp320中的一些数据
grp320中的一些数据
grp320中的一些数据
grp321中的一些数据
grp321中的一些数据
grp321中的一些数据
grp322中的一些数据
grp322中的一些数据
grp322中的一些数据

希望边框位于每个

grp

的第一个和最后一个实例中吗？语义方法是更改标记。将每组类似tr放入一个tbody中。如果可能的话，一定要这样做。否则它会变得混乱，使用诸如

.grp320+.grp320、.grp321+.grp321、.grp322+.grp322

、

.grp320+.grp321、.grp321+.grp322、.grp322:last child

等选择器。@swelar我想在第一行和最后一行之间添加边框。@MrLister如果标记不在我的控制范围内，该怎么办。是否可以使用css通配符选择器，如

tr[class^=grp]

或类似的东西，这样我就不必定义所有的grp css类。目前还不清楚您想要专门针对哪个不同的tr。正如答案中的混乱所显示的，您没有提供足够的信息来给出明确的答案。请更好地解释您需要做什么，表中有多少tr等。在这里，您假设每个类的tr总是3。每个类可以有任意数量的tr。tr计数3不是固定的。@Mayank该信息属于问题。您从“我有以下标记结构”开始，这使我们相信您有一个包含3组3个tr的表。如果不是这样，那就说吧！

table tr.grp322:last-child {rules here}

    you can write css like below:
     tr:nth-child(3n+1){
          border-bottom: 1px solid #000;
     }
      tr:nth-child(3n+3){
          border-bottom: 1px solid #000;
    }