html - 排在附属类(class)的第一个 child ？

Question

我有一个CSS规则...

tr.my-style td.my-style-2
{
  border-top: 1px solid #F00;
}

这为我表中每一行的每个数据单元格提供了红色边框。 “my-style”和“my-style-2”附加到生成的组件的 html。

我应该将第一个子选择器放在规则中的什么位置以仅将样式应用到表格的第一行？

这是我在 FireFox 中使用“获取 css 路径”的实际 css...

html.js body div.container div.row div.col-md-9 table#Accounts.dxgvControl_Bootstrap3 tbody tr td table#Accounts_DXMainTable.dxgvTable_Bootstrap3 tbody tr#Accounts_DXDataRow0.dxgvDataRow_Bootstrap3 td.dxgv

但“#Accounts_DXDataRow0”指的是第一行。我想在不使用硬编码标识符的情况下推广规则。

我试过...

tr.dxgvDataRow_Bootstrap3:first-child td.dxgv
{
border-top: 2px solid #DDDDDD;
}

Answer 1

你把它放在 tr 选择器的末尾:

tr.my-style:first-child td.my-style-2
{
  border-top: 1px solid #F00;
}