CSS颜色父行
我是一个CSS初学者，我需要着色的一行HTML表格，其中包含一个具有特定id的单元格<th>
如何访问th:id=yeah的父元素以添加此css选项：background-color:red
<table style="width:100%">
<tr>
<th id="yeah">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td id="one">Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<style>
#one{
background-color: red
}
tr#yeah{
background-color: blue
}
table.class-name th:first-child {
background: red;
}
</style>回答 3
Stack Overflow用户
发布于 2020-07-01 01:52:17
你差一点就到了！
你的CSS：
tr#yeah{
background-color: blue;
}更改：
#yeah{
background-color: blue;
}请记住一件小事。在CSS中设计元素的样式时，不必总是包含标记()
CSS知道您正在通过标签ID (#yeah)设置特定元素的样式，这就是为什么要在html中为元素指定ID的原因。
祝你好运:祝你学习愉快。
Stack Overflow用户
发布于 2020-07-01 01:58:56
这似乎是一个框架问题。您要问的是如何获取已找到的元素并对其父元素执行某些操作。
你不能这样做。CSS不是那样工作的。它不会倒退。
编辑:我的前两个建议给出了实现我认为是最终目标的替代结构。如果您一定要使用您提供的结构，那么我的第三个答案提供了一种可能的变通方法，根据您非常具体的环境，该变通方法可能会实际工作，也可能不会。
在实践中，您似乎想要实现的是设置表格标题的样式，这是完全可能的。归根结底，这取决于元素的结构以及元素、类和It的使用。
一种方法是使用额外的元素thead来标识表的标题行。这是可样式化的，因为您设计的是thead的子元素，而不是元素的父元素。
thead>tr {
background-color: red;
}<table style="width:100%">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
另一种方法是简单地为标题所在行提供自己的类，而不是使用thead。
突然间，这也是可样式化的。我们指出，我们正在寻找的tr (表行)也有一个名为header-row的类(由下面CSS中的.指示，前面没有空格)
tr.header-row {
background-color: red;
}<table style="width:100%">
<tr class="header-row">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
作为最后的手段，(我真的希望你能避免这种情况，但是...)如果您完全使用了前面介绍的结构，那么可以为元素及其后续的同级元素使用同级选择器~。它不会将其应用于tr父元素，但会应用于所有th元素。然而，与您试图解决的"parent“问题类似，只有当"id'd”元素是行中的第一个元素时，这才能起作用。
#yeah, #yeah ~ th {
background-color: red;
}<table style="width:100%">
<tr>
<th id="yeah">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Stack Overflow用户
发布于 2020-07-01 02:15:54
不幸的是，没有CSS选择器从另一个元素指向父元素。但是，您也可以对具有给定id的所有td或th进行着色。
#yeah {
background: red;
}
#yeah ~ th, #yeah ~ td{
background-color: red
}这将使单元格的id=Yeah颜色为红色，其同级元素为蓝色。
但有一个问题:红色单元格必须是行中的第一个单元格(例如表)，因为同级选择器"~“只影响目标之后的元素。
https://stackoverflow.com/questions/62663101
复制相似问题
腾讯云开发者
