tbody元素破坏了nth-child选择器

时间：2017-04-19 10:49:55

标签： html css css-selectors

下面的代码应按如下颜色对行进行着色：

  1. 黄色，
  2. red，
  3. 黄色，
  4. red，
  5. 黄色，
  6. 红......等......

    7. 删除所有<tbody>和</tbody>时，这可以正常工作。

    但如果使用<tbody>和</tbody>，就像我的代码一样，布局会中断。似乎它在每个<tbody>区块再次以黄色开始。

    不幸的是我需要使用tbody的HTML，所以我不能简单地删除它。

    有人知道这个问题的CSS解决方法吗？

    ＆＃13;
    ＆＃13; 
    table {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border-width: 1px;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-color: green;
}

td {
  padding: 10px;
}

.left {
  min-width: 160px;
  text-align: left;
  padding-left: 10px;
  -webkit-touch-callout: none;
}

.middle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.right {
  min-width: 160px;
  text-align: right;
  padding-right: 10px;
}

.boldtitle {
  color: green;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

tr:nth-child(even) {
  background-color: red;
}

tr:nth-child(odd) {
  background-color: yellow;
}

td {
  border-width: 1px;
  border-left-style: dotted;
  border-top-style: dotted;
  border-color: green;
}

@media only screen and (min-width:751px) {
  .table_details {
    display: none;
  }
}
    ＆＃13; 
    <table>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Cars</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">GM</a><span class="link_company">GM & </span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">VW</a><span class="link_company">VW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">BMW</a><span class="link_company">BMW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Citroen</a><span class="link_company">Citroen</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Fruits</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Apple</a><span class="link_company">Apple</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Banana</a><span class="link_company">Banana</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Plump</a><span class="link_company">Plump</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

</table>
    ＆＃13;
    ＆＃13;
    ＆＃13;

5 个答案:

答案 0 :(得分：7)

检查this是否符合您的要求。

添加CSS：

tbody:nth-child(even) tr:nth-child(odd) {
    background-color: red;
}

tbody:nth-child(even) tr:nth-child(even) {
    background-color: yellow;
}

答案 1 :(得分：1)

而不是使nth-child选择器相对于忽略table因子的tbody元素，使它们相对于每个tbody元素，这使您可以更好地控制他们的造型。

以下解决方案基于您现有的HTML结构，该结构在第一个tbody中包含奇数行。如果这变为偶数，则需要调整选择器。

tbody:nth-child(odd) tr:nth-child(odd) {
  background-color: yellow;
}

tbody:nth-child(odd) tr:nth-child(even) {
  background-color: red;
}

tbody:nth-child(even) tr:nth-child(odd) {
  background-color: red;
}
tbody:nth-child(even) tr:nth-child(even) {
  background-color: yellow;
}


table {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border-width: 1px;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-color: green;
}

td {
  padding: 10px;
}

.left {
  min-width: 160px;
  text-align: left;
  padding-left: 10px;
  -webkit-touch-callout: none;
}

.middle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.right {
  min-width: 160px;
  text-align: right;
  padding-right: 10px;
}

.boldtitle {
  color: green;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

tbody:nth-child(odd) tr:nth-child(odd) {
  background-color: yellow;
}

tbody:nth-child(odd) tr:nth-child(even) {
  background-color: red;
}

tbody:nth-child(even) tr:nth-child(odd) {
  background-color: red;
}
tbody:nth-child(even) tr:nth-child(even) {
  background-color: yellow;
}

td {
  border-width: 1px;
  border-left-style: dotted;
  border-top-style: dotted;
  border-color: green;
}
<table>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Cars</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">GM</a><span class="link_company">GM & </span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">VW</a><span class="link_company">VW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">BMW</a><span class="link_company">BMW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Citroen</a><span class="link_company">Citroen</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Fruits</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Apple</a><span class="link_company">Apple</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Banana</a><span class="link_company">Banana</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Plump</a><span class="link_company">Plump</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

</table>

答案 2 :(得分：0)

您可以使用以下选择器，以便着色不包括每个tbody的第一个tr：

tr:nth-child(2n+3) {
  background-color: red;
}

tr:nth-child(2n+2) {
  background-color: yellow;
}


table {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border-width: 1px;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-color: green;
}

td {
  padding: 10px;
}

.left {
  min-width: 160px;
  text-align: left;
  padding-left: 10px;
  -webkit-touch-callout: none;
}

.middle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.right {
  min-width: 160px;
  text-align: right;
  padding-right: 10px;
}

.boldtitle {
  color: green;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

tr:nth-child(2n+3) {
  background-color: red;
}

tr:nth-child(2n+2) {
  background-color: yellow;
}

td {
  border-width: 1px;
  border-left-style: dotted;
  border-top-style: dotted;
  border-color: green;
}

@media only screen and (min-width:751px) {
  .table_details {
    display: none;
  }
}
<table>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Cars</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">GM</a><span class="link_company">GM & </span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">VW</a><span class="link_company">VW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">BMW</a><span class="link_company">BMW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Citroen</a><span class="link_company">Citroen</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Fruits</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Apple</a><span class="link_company">Apple</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Banana</a><span class="link_company">Banana</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Plump</a><span class="link_company">Plump</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

</table>

答案 3 :(得分：0)

你需要使用你在t上使用tr所做的相同的事情

tbody:nth-child(odd) tr:nth-child(even) {
  background-color: red;
}

tbody:nth-child(odd) tr:nth-child(odd) {
  background-color: yellow;
}

tbody:nth-child(even) tr:nth-child(even) {
  background-color: yellow;
}

tbody:nth-child(even) tr:nth-child(odd) {
  background-color: red;
}

结果如下：

table {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border-width: 1px;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-color: green;
}

td {
  padding: 10px;
}

.left {
  min-width: 160px;
  text-align: left;
  padding-left: 10px;
  -webkit-touch-callout: none;
}

.middle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.right {
  min-width: 160px;
  text-align: right;
  padding-right: 10px;
}

.boldtitle {
  color: green;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

tbody:nth-child(odd) tr:nth-child(even) {
  background-color: red;
}

tbody:nth-child(odd) tr:nth-child(odd) {
  background-color: yellow;
}

tbody:nth-child(even) tr:nth-child(even) {
  background-color: yellow;
}

tbody:nth-child(even) tr:nth-child(odd) {
  background-color: red;
}

td {
  border-width: 1px;
  border-left-style: dotted;
  border-top-style: dotted;
  border-color: green;
}

@media only screen and (min-width:751px) {
  .table_details {
    display: none;
  }
}
<table>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Cars</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">GM</a><span class="link_company">GM & </span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">VW</a><span class="link_company">VW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">BMW</a><span class="link_company">BMW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Citroen</a><span class="link_company">Citroen</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Fruits</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Apple</a><span class="link_company">Apple</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Banana</a><span class="link_company">Banana</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Plump</a><span class="link_company">Plump</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

</table>

答案 4 :(得分：0)

由于CSS4标准还不是传统的，你可以简单地使用我写过的这小块js。 （Vanilla，不需要jQuery - QuerySelector主要支持IE8 +）

当触发它时，它会向表中的行添加偶数类（忽略表体）

var Tables = document.querySelectorAll("table");//Find Tables in document
for (var i = 0; i < Tables.length; i++) {
  var Rows = Tables[i].querySelectorAll("tr");//find rows in each found table
  for (var j = 0; j < Rows.length; j++) {
    if (j % 2 !== 0) Rows[j].classList.add("even");//Even row - add class
  }
}
table {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0px;
  border-width: 1px;
  border-right-style: dotted;
  border-bottom-style: dotted;
  border-color: green;
}

td {
  padding: 10px;
}

.left {
  min-width: 160px;
  text-align: left;
  padding-left: 10px;
  -webkit-touch-callout: none;
}

.middle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.right {
  min-width: 160px;
  text-align: right;
  padding-right: 10px;
}

.boldtitle {
  color: green;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}

tr{
  background-color: yellow;
}
tr.even {
  background-color: red;
}

td {
  border-width: 1px;
  border-left-style: dotted;
  border-top-style: dotted;
  border-color: green;
}

@media only screen and (min-width:751px) {
  .table_details {
    display: none;
  }
}
<table>
  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Cars</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">GM</a><span class="link_company">GM & </span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">VW</a><span class="link_company">VW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">BMW</a><span class="link_company">BMW</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Citroen</a><span class="link_company">Citroen</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

  <tbody>
    <tr class="header">
      <td colspan="3" class="left">
        <p class="boldtitle">Fruits</p>
      </td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Apple</a><span class="link_company">Apple</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Banana</a><span class="link_company">Banana</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
    <tr>
      <td class="left"><a class="table_details" href="http://www.example.com">Plump</a><span class="link_company">Plump</span></td>
      <td class="middle">XXXXXXXXXX</td>
      <td class="right">YYYYYYYYYY<br></td>
    </tr>
  </tbody>

</table>

相关问题
最新问题