我正在构建一个类似于此的表:
<head>
<style>
td + td {
background-color: red
}
</style>
</head>
<body>
<table style="border: solid 1px black">
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
</body>
&#13;
使用&#34; td + td&#34;选择一切但是第一列,对我来说效果很好。
<head>
<style>
td + td {
background-color: red
}
</style>
</head>
现在反转什么&#34; td + td&#34;通过使用&#34; td:first-child&#34;工作得很好:
<head>
<style>
td:first-child {
background-color: red
}
</style>
</head>
<body>
<table style="border: solid 1px black">
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
</body>
&#13;
然而,我正在寻找一种转向&#34; td + td&#34;周围(反向/反向)做同样的事情&#34; td:first-child&#34;确实。换句话说,我正在寻找像&#34; td - (td + td)&#34;这实际上不是一段有效的代码。所以我可以将它放入我的HTML文件中的<style></style>
标签。
寻找解决方案并没有让我到任何地方,所以我在这里,嗨。
编辑:
这里基本上可以实现两个结果:
- 选择一切但是第一列
和
- 仅选择第一列
两者都可以采用不同的方式。到目前为止,我已经了解了两种方法
&#34;选择所有BUT第一列&#34;
1. "td + td"
2. "td:nth-child"
和
的一种方法&#34;仅选择第一列&#34;
1. "???"
2. "td:first-child"
我错过了&#34; td + td&#34;不使用任何版本的:nth-child或:type等(寻找一个非冒号的版本,比如&#34; td + td&#34;是)。
为什么呢?学习更多方法来提高我的整体编码技能。
答案 0 :(得分:1)
如您所知,td + td
表示该样式仅适用于直接跟随另一个表格单元格的表格单元格 - &gt;相邻选择器
注意:
直接跟随
没有css选择器可以应用于刚好在另一个元素之前的元素(上面的反向 - 前一个兄弟选择器)。
原因:
当浏览器获取一组必须在页面上堆叠的相邻元素时,它将按照它们在HTML中出现的顺序排列。
资料来源:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
css选择器旨在为浏览器轻松(快速)实现。文档可以遍历一次,随时匹配元素,无需向后调整匹配
答案 1 :(得分:0)
如果我理解正确,你需要nth-child使用奇数甚至是这样:
td:nth-child(odd){
background-color: blue;
}
td:nth-child(even){
background-color: green;
}
td:first-child {
background-color: red
}
答案 2 :(得分:0)
我认为最简单的解决方案如下:
td {
background-color: red;
}
td:last-child {
background-color: white;
}