附班级的第一个孩子？答案

【问题标题】：first-child on row with attached class?附班级的第一个孩子？
【发布时间】：2013-12-24 01:03:39
【问题描述】：

我有一个 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;
}

【问题讨论】：

如果你说的是行，tr。

标签： html css css-selectors

【解决方案1】：

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

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

【讨论】：

我也以为会是这样，我已经尝试过了，但由于某些奇怪的原因它不起作用。
如果它是表中的第二个 tr，它不会选择第一个具有 my-style 类的 tr。换句话说，它只会选择表中的第一个 tr 并且只有它包含 my-style 类。

【解决方案2】：

: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

【讨论】：

您可以将:first-child 与其他选择器结合使用——它们不会改变其含义。