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

Question

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

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 的 table 中包含的元素更改 "myclass2" 的样式，而不是具有 3 个 TD 的 table 中包含的元素。这可能吗？

Answer 1

这是可能的，是的，但您需要使用多个 selector，检查第一个单元格也是倒数第 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>

或者，仅 select 第一个 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 个单元格的行，将使用否定 pseudo-class 到 select 第一个单元格不是最后一个、倒数第二个或倒数第三个单元格及其后面的所有单元格：

.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.

，这些可能不是您的最佳解决方案

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

CSS child's element selector - HTML Email

html

css

html-email