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的表格。 这是否可能呢？

- MeV

---

我不相信这是可能的，因为唯一确认<table>有四个单元格的方法是使用第四个或最后一个<td>；而且目前还没有办法选择该第四个<td>之前的兄弟节点。据我所知，这是一个需要以某种方式使用JavaScript解决的问题。 - David Thomas

@DavidThomas 谢谢。我正在开发一个HTML电子邮件，所以我不能使用js :-) - MeV

嗨MeV，如果表格有4个TD，则应该具有类myclass2，而其他TD则不应具有此类？ - Mudassir

@MeV：有趣的发现！那么td:nth-last-child(4), td:nth-last-child(4) ~ td {/* css */}应该根据您的需求为<td>元素设置样式？尽管存在一个风险，即具有五个或更多<td>元素兄弟的<table>将导致这些样式出现问题：演示。 - David Thomas

如果你在开发HTML电子邮件，请注意许多邮件客户端会去除或忽略<style> CSS，并可能只依据内联CSS。通过像http://premailer.dialect.ca/这样的工具运行你的代码可以给你一个支持和不支持的报告。 - dogwoodtree-dot-net

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

注意: 鉴于一些电子邮件客户端对CSS的支持较差, 这些可能不是最优解决方案。

- Shaggy

---

太棒了！谢谢！ - MeV

不用谢 :) 我已更新我的答案，加入了第三种解决方案，可能对你有用。 - Shaggy

谢谢！太棒了。 - MeV

由于在HTML电子邮件中缺乏支持，此方法无法在所有电子邮件客户端上运行。建议使用内联CSS而非“常规CSS”在head标签中进行编写。此外，还有其他事项需要注意。 - dippas

感谢提供，@dippas；请查看我几分钟前在问题上发表的评论。 - Shaggy

内联样式现在不那么重要了，因为 Gmail 支持 head 中的样式。但是 nth-chd 可能是在 Outlook 2003 之后才被提出来的，所以电子邮件支持会受到限制。 - Eoin