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

【问题标题】：CSS child's element selector - HTML EmailCSS 子元素选择器 - HTML 电子邮件
【发布时间】：2016-06-02 13:51:44
【问题描述】：

我正在尝试找到一种方法来更改一个类的 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 的表。这可能吗？

【问题讨论】：

我不相信这是可能的，因为确定<table> 中有四个单元格的唯一方法是使用第四个或最后一个<td>；并且（到目前为止）还没有办法选择第四个<td> 的前一个兄弟姐妹。据我所知，这是一个需要以某种方式使用 JavaScript 的问题。
@Vohuman 这是错误的。见这里：stackoverflow.com/questions/8720931/…。我的例子也证明这是可能的。
@DavidThomas 谢谢。我正在开发一个 HTML 电子邮件，所以我将无法使用 js :-)
嗨 MeV，所以如果表有 4 个 TD，它应该有 myclass2 类，而其他不应该有这个类？
如果您正在开发 HTML 电子邮件，请注意许多电子邮件客户端会删除或忽略

标签： html css html-email

【解决方案1】：

有可能，是的，但您需要使用多个选择器，检查第一个单元格也是倒数第四个单元格，第二个也是倒数第三个，依此类推：

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

或者，或者，只需选择第一个也是倒数第四个孩子的孩子和任何跟随它的单元格：

.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，这些可能不是您的最佳解决方案。

【讨论】：

这太棒了！谢谢！
不客气 :) 我已经用第三种可能对你有用的解决方案更新了我的答案。
谢谢！太棒了
这不适用于所有电子邮件客户端，因为在处理 html 电子邮件时缺少 support，建议在 head 以及其他 stuff 上使用内联 css 而不是“常规 css” /跨度>
感谢您提供，@dippas；请参阅我对几分钟前提出的问题的评论。