附加课的第一个孩子?

时间:2013-12-06 15:44:01

标签: html css css-selectors

我有一条css规则......

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

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

我在哪里将第一个子选择器放在规则中,只将样式应用到表格的第一行?

这是我在FireFox中使用'get css path'的实际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;
}

2 个答案:

答案 0 :(得分:1)

您将它放在tr选择器的末尾:

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

答案 1 :(得分:0)

:first-child伪类代表其父级的第一个子级。请尝试使用兄弟选择器(〜)。

/*default*/
td{border:1px solid #333}

/*style of first element*/
tr.my-style td.my-style-2{
  border-top: 1px solid #F00;
}

/*style for all the rest*/
td.my-style-2 ~ td.my-style-2 {
  border-top:1px solid #333;
}

JSFiddle example

请查看Lea Verou关于类似问题的答案: https://stackoverflow.com/a/5293095/935077