有下表，是否可以为 tr:first-child 设置特定样式，当 :first-child 为上一个 tr 有不同的类？在示例表中，我希望第 2 行和第 4 行有圆 Angular ，但第 5 行没有(因为第 4 行第一个 child 与第 5 行第一个 child 具有相同的类)。
<html>
<head>
<style type="text/css">
table { width: 100%; }
.a { background-color: red; }
table > tbody > tr:first-child > td.a:first-child {
border-top-left-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr><td colspan=2>title</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
<tr><td class=b>sadsf</td><td class=b>adsfs</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
<tr><td class=a>sadsf</td><td class=a>adsfs</td></tr>
</table>
</body>
</html>
最佳答案
简短回答:否
可以引用 CSS Selectors here .
长答案:
让我们先简化您的标题:
我想给一个元素设置样式，但前提是该元素直接位于邻居的第一个子元素之前的元素不属于同一类。
这可以使用 javascript 轻松实现，但让我们假装您不能使用 javascript 并且您可以自由地进行类声明。
您应该做的第一件事是为每个父元素指定一个唯一的类名(我会选择与子元素相同的类名)。所以在这个例子中它将是 <tr class=“a”>等等。
然后我们可以为每个:first-child设置样式具有您想要的效果(在本例中为 border-radius )。
稍后我们可以使用 css 选择器来定位每个元素，这些元素有一个具有相同类名的相邻兄弟(请参阅 docs)，我们将恢复或删除刚刚放置在它上面的样式。
这是一个使用 li 的 fiddle 元素为 demo 在下面的代码片段中，您将看到另一个使用 table 的示例元素。
tr {
color: orange;
}
tr.a > td.a:first-child,
tr.b > td.b:first-child,
tr.c > td.c:first-child {
color: aqua; /* style all first-children*/
}
tr.a + tr.a > td.a:first-child,
tr.b + tr.b > td.b:first-child,
tr.c + tr.c > td.c:first-child {
color: orange; /*revert the styling on select elemets*/
}<table>
<tr class="a">
<td colspan="2">class-a</td><!--should be styled-->
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should NOT be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="b">
<td class="b">class-b</td><!--should be styled-->
<td class="b">class-b</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should be styled-->
<td class="c">class-c</td>
</tr>
<tr class="c">
<td class="c">class-c</td><!--should NOT be styled-->
<td class="c">class-c</td>
</tr>
</table>关于CSS 选择器，如果前一个元素有不同类名的子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33811158/