那些遇到过的问题

跳过表格中奇数行和偶数行中的某些行——连续 CSS 样式

Dar*_*iya 5 html css html-table

我有一个 HTML 表，我想要奇数/偶数序列彩色行，但不包括.SectionHeader类并在它离开的地方继续其序列样式。

\n\n

\r\n
\r\n
tr:not(.SectionHeader):nth-of-type(odd) {\r\n    background-color:#fff;\r\n}\r\ntr:not(.SectionHeader):nth-of-type(even) {\r\n    background-color:#f0f9ff;\r\n}\r\ntr.SectionHeader{background: red;}
Run Code Online (Sandbox Code Playgroud)\r\n
<table class="pvk_table">\r\n    <thead>\r\n      <tr class="SectionHeader">\r\n          <th colspan="3">B\xc3\x96L\xc3\x9cM / PROGRAM</th>\r\n          <th colspan="2">2015 \xc3\x96SYS TABAN GENEL KONTENJAN</th>\r\n          <th colspan="2">2015 \xc3\x96SYS TAVAN GENEL KONTENJAN</th>\r\n          </tr>\r\n      </thead>\r\n      <tbody>\r\n      <tr class="SectionHeader">\r\n        <th>\xc4\xb0ktisadi ve \xc4\xb0dari Bilimler Fak\xc3\xbcltesi</th>\r\n        <th>Puan T\xc3\xbcr\xc3\xbc</th>\r\n        <th>Kontenjan</th>\r\n        <th>Puan</th>\r\n        <th>S\xc4\xb1ralama</th>\r\n        <th>Puan</th>\r\n        <th>S\xc4\xb1ralama</th>\r\n      </tr>\r\n      <tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr>\r\n      <tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr><tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr>\r\n      \r\n      <tr class="SectionHeader">\r\n          <th colspan="3">B\xc3\x96L\xc3\x9cM / PROGRAM</th>\r\n          <th colspan="2">2015 \xc3\x96SYS TABAN GENEL KONTENJAN</th>\r\n          <th colspan="2">2015 \xc3\x96SYS TAVAN GENEL KONTENJAN</th>\r\n          </tr>\r\n          <tr>\r\n        <td class="hidden-xs">\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr>\r\n      <tr>\r\n        <td>\xc4\xb0ktisat</td>\r\n        <td>TM-1</td>\r\n        <td>100</td>\r\n        <td>416,44977</td>\r\n        <td>13927</td>\r\n        <td>458,45591</td>\r\n        <td>3081</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

我还想要此表中第三个红色标题之后的蓝色行。\n请建议我应该做什么，我陷入了这个问题。

\n

zer*_*0ne 3

更新2

\n\n

OP：如果不添加这个额外的类，是否可以做到这一点？<tr>.row0

\n\n

是的，肯定有一种替代方法，事后看来，更好、更有效的方法是使用另一种方法<tbody>.

\n\n

管理中心：

\n\n
\n

...允许多个 <tbody> 元素（如果连续），允许长表中的数据行分为不同的部分，每个部分单独格式化每个部分根据需要

\n
\n\n

改变：

\n\n
tr:nth-of-type(odd) { background-color: #fff; }\ntr:nth-of-type(even) { background-color: #f0f9ff; }\n
Run Code Online (Sandbox Code Playgroud)\n\n

到：

\n\n
tbody tr:nth-of-type(odd) { background-color: #fff; }\ntbody tr:nth-of-type(even) { background-color: #f0f9ff; }\n
Run Code Online (Sandbox Code Playgroud)\n\n

并添加：

\n\n
</tbody>\n<tbody>\n
Run Code Online (Sandbox Code Playgroud)\n\n

最后之前tr.SectionHeader

\n\n

片段

\n\n

\r\n
\r\n
tr:nth-of-type(odd) { background-color: #fff; }\ntr:nth-of-type(even) { background-color: #f0f9ff; }\n
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

\n\n

更新

\n\n

经过重读、编辑，然后重读OP，我终于理解了这个问题，并且我对这个问题有了更新的解决方案。之前发布的所有代码仍然相关并且是此更新所必需的。

\n\n

基本上，OP 无法获得蓝色行来继续表格下端的红色标题。因此，在阅读@BoltClock♦关于此事的帖子后后，我突然意识到所需要的只是插入或删除一行。我选择插入额外的行，但我认为对表尺寸的任何更改都可能会导致布局困难。所以我想出了这个：

\n\n
\n

不要复制和粘贴此代码，它会被切成碎片，因此您在阅读时不会滚动。

\n
\n\n

CSS

\n\n
\n

.row0有宽度但没有高度（一条线）。这种样式允许.row0在表格中作为有效的\n存在，<tr>而不会改变或干扰表格的视觉和布局。

\n
\n\n
 tr.row0 { height: 0; border-spacing: 0; border: none; font-size: 0; \n margin: 0; padding: 0; line-height: 0; }\n
Run Code Online (Sandbox Code Playgroud)\n\n

超文本标记语言

\n\n
\n

.row0 标记与其风格一样最小。这里我们有一个空的<tr>\n （没有孩子喜欢<td>）。确保将其.row0插入到您计划碰撞的目标行之前的任何位置。

\n
\n\n
 <tr class="row0"></tr>\n
Run Code Online (Sandbox Code Playgroud)\n\n

现在最终的结果是：

\n\n
    \n
  • 全部.SectionHeader都是红色的。
    • \n
  • 所有奇数<tr>（标题除外）都是白色的。
    • \n
  • 所有偶数<tr>（标题除外）都是蓝色的。
    • \n
  • 最重要的是，第三个标题行的颜色现在是蓝色。\n
    • \n
\n\n

前面提到的代码仍然适用。

\n\n

要制作交替的彩色行，请<tbody>参考<tr>

\n\n

这是一个鲜为人知的技巧，其作用就像!important

\n\n

加倍你的.class规则集

\n\n

一探究竟：

\n\n
tr.SectionHeader.SectionHeader {background: red;}\n
Run Code Online (Sandbox Code Playgroud)\n\n

现在每个都.SectionHeader像它应该的那样是红色的。要测试它，请尝试删除一个类：

\n\n
tr.SectionHeader {background: red;}\n
Run Code Online (Sandbox Code Playgroud)\n\n

您会发现.SectionHeader现在并非所有颜色都是红色的。这个技巧增加了选择器的特异性，但它并不完全像!important.

\n\n

更新了Plunker

\n\n

更新的片段

\n\n

\r\n
\r\n
<!doctype html>\r\n<html>\r\n<head>\r\n<meta charset="utf-8">\r\n<title>Increased Specificity and Row 0</title>\r\n<style>\r\ntr:nth-of-type(odd) { background-color: #fff; }\r\ntr:nth-of-type(even) { background-color: #f0f9ff; }\r\ntr.SectionHeader.SectionHeader { background: red; }\r\ntr.row0 { height: 0; border-spacing: 0; border: none; font-size: 0; margin: 0; padding: 0; line-height: 0; }\r\n</style>\r\n</head>\r\n\r\n<body>\r\n\r\n<table class="pvk_table">\r\n  <thead>\r\n    <tr class="SectionHeader">\r\n      <th colspan="3">B\xc3\x96L\xc3\x9cM / PROGRAM</th> <th colspan="2">2015 \xc3\x96SYS TABAN GENEL KONTENJAN</th> <th colspan="2">2015 \xc3\x96SYS TAVAN GENEL KONTENJAN</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr class="SectionHeader">\r\n      <th>\xc4\xb0ktisadi ve \xc4\xb0dari Bilimler Fak\xc3\xbcltesi</th> <th>Puan T\xc3\xbcr\xc3\xbc</th> <th>Kontenjan</th> <th>Puan</th> <th>S\xc4\xb1ralama</th> <th>Puan</th> <th>S\xc4\xb1ralama</th>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hidden-xs">\xc4\xb0ktisat</td> <td>TM-1</td> <td>100</td> <td>416,44977</td> <td>13927</td> <td>458,45591</td> <td>3081</td>\r\n    </tr>\r\n    <tr>\r\n      <td class="hid

        
    
          
          
  • 
              谢谢@Darshanambaliya。请参阅更新 2。 (2认同)
          
    •

归档时间：

查看次数：

3871 次

最近记录：

8 年，8 月 前
我可以组合:nth-​​child()或:nth-​​of-type()与任意选择器？ 103
我可以组合:nth-​​child()或:nth-​​of-type()与任意选择器？ 103
更多相关链接
相关归档
如何将样式应用于嵌入式SVG？ 104
CSS滤镜:使透明白色的彩色图像 100
你怎么做div"tabbable"？ 82
提交带有空复选框的HTML表单 41
如何在html中的select(Multiple)指定索引处插入选项？ 30
CSS Language Speak:Container vs Wrapper？ 28
防止CKEditor在源模式下格式化代码 20
如何在烧瓶路线中接收网络摄像头视频流？ 19
进度标签和仪表标签之间的区别 18
使用jQuery识别表<tbody>元素中的所有行 7
难疑归档
如何重命名本地Git分支？ 8033
"px","dip","dp"和"sp"之间有什么区别？ 5676
基于表单的网站身份验证的权威指南 5311
如何动态合并两个JavaScript对象的属性？ 2338
使用jQuery从下拉列表(选择框)中获取所选文本 2240
带请求正文的HTTP GET 1896
按值复制数组 1638
vim"用sudo写"技巧如何工作？ 1347
如何在Python中使用线程？ 1210
检查jQuery中是否存在元素 1209
Copyright Info

© Copyright 2013-2021 admin@qa.1r1g.com

如未特别说明，本网站的内容使用如下协议:
Creative Commons Atution-NonCommercial-ShareAlike 4.0 International license.

用以下方式浏览
参考资料
回到顶部
网安备44200002443738
粤ICP备19038133号