html - CSS 子元素选择器 - HTML 电子邮件

Question

我正在尝试找到一种方法来更改类的 css，前提是它位于具有 4 个 td 的表中。该代码可能会更好地解释我的问题。

HTML

<table class="myclass">
<tr>
  <td>1 <span class="myclass2">xxx</span></td>
  <td>2 <span class="myclass2">xxx</span></td>
  <td>3 <span class="myclass2">xxx</span></td>
</tr>
</table>

<table class="myclass">
<tr>
  <td>1 <span class="myclass2">xxx</span></td>
  <td>2 <span class="myclass2">xxx</span></td>
  <td>3 <span class="myclass2">xxx</span></td>
  <td>4 <span class="myclass2">xxx</span></td>
</tr>
</table>

CSS

.myclass td:first-child:nth-last-child(3),td:first-child:nth-last-child(3) ~ td {
        background-color:white !important;
    }
.myclass td:first-child:nth-last-child(4),td:first-child:nth-last-child(4) ~ td {
        background-color:red !important;
    }
.myclass2 {
  color:blue;
}

JSFiddle 已准备就绪:JSFIDDLE HERE

我想做的是仅针对具有 4 个 TD 的表中包含的元素更改“myclass2”的样式，而不是具有 3 个 TD 的表。这可能吗？

Answer 1

有可能，是的，但是您需要使用多个选择器，检查第一个单元格也是倒数第 4 个单元格，第 2 个也是倒数第 3 个，依此类推:

.myclass2{
    background:#000;
    color:#fff;
}
td:first-child:nth-last-child(4)>.myclass2,
td:nth-child(2):nth-last-child(3)>.myclass2,
td:nth-child(3):nth-last-child(2)>.myclass2,
td:nth-child(4):last-child>.myclass2{
    background:#f00;
}

<table class="myclass">
    <tr>
        <td>1 <span class="myclass2">xxx</span></td>
        <td>2 <span class="myclass2">xxx</span></td>
        <td>3 <span class="myclass2">xxx</span></td>
    </tr>
</table>
<table class="myclass">
    <tr>
        <td>1 <span class="myclass2">xxx</span></td>
        <td>2 <span class="myclass2">xxx</span></td>
        <td>3 <span class="myclass2">xxx</span></td>
        <td>4 <span class="myclass2">xxx</span></td>
    </tr>
</table>

或者，或者，只选择第一个也是倒数第四个 child 的第一个 child 和它后面的任何单元格:

.myclass2{
    background:#000;
    color:#fff;
}
td:first-child:nth-last-child(4)>.myclass2,
td:first-child:nth-last-child(4)~td>.myclass2{
    background:#f00;
}

<table class="myclass">
    <tr>
        <td>1 <span class="myclass2">xxx</span></td>
        <td>2 <span class="myclass2">xxx</span></td>
        <td>3 <span class="myclass2">xxx</span></td>
    </tr>
</table>
<table class="myclass">
    <tr>
        <td>1 <span class="myclass2">xxx</span></td>
        <td>2 <span class="myclass2">xxx</span></td>
        <td>3 <span class="myclass2">xxx</span></td>
        <td>4 <span class="myclass2">xxx</span></td>
    </tr>
</table>

另一种方法是，如果您想定位具有大于 3 的任意数量的单元格的行，将使用否定伪类来选择不是最后一个、倒数第二个或倒数第三个单元格的第一个单元格以及它后面的所有单元格:

.myclass2{
    background:#000;
    color:#fff;
}
td:first-child:not(:nth-last-child(-n+3))>.myclass2,
td:first-child:not(:nth-last-child(-n+3))~td>.myclass2{
    background:#f00;
}

<table class="myclass">
    <tr>
        <td>1 <span class="myclass2">xxx</span></td>
        <td>2 <span class="myclass2">xxx</span></td>
        <td>3 <span class="myclass2">xxx</span></td>
    </tr>
</table>
<table class="myclass">
    <tr>
        <td>1 <span class="myclass2">xxx</span></td>
        <td>2 <span class="myclass2">xxx</span></td>
        <td>3 <span class="myclass2">xxx</span></td>
        <td>4 <span class="myclass2">xxx</span></td>
    </tr>
</table>
<table class="myclass">
    <tr>
        <td>1 <span class="myclass2">xxx</span></td>
        <td>2 <span class="myclass2">xxx</span></td>
        <td>3 <span class="myclass2">xxx</span></td>
        <td>4 <span class="myclass2">xxx</span></td>
        <td>5 <span class="myclass2">xxx</span></td>
        <td>6 <span class="myclass2">xxx</span></td>
    </tr>
</table>

注意:鉴于the poor support some e-mail clients have for CSS，这些可能不是您的最佳解决方案。 .