我有一条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;
}
答案 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;
}
请查看Lea Verou关于类似问题的答案: https://stackoverflow.com/a/5293095/935077