选择移动电子邮件中的第n个子元素

Question

我正在尝试备份我们在来自广告服务的响应电子邮件中看到的一些问题。偶尔，我们的广告会附带第三方脚本，该脚本会拉入1x1跟踪像素。我们使用全局规则来调整图像大小。。。img｛width:100%；height:auto；｝并且我们不可能使用类或id来针对这个跟踪像素。我正在考虑使用第n个子选择器来适当调整跟踪像素的大小，至少在移动设备上是这样，因为它们在很大程度上支持这种CSS，尽管我写得不好。如有任何帮助，我们将不胜感激。

http://jsfiddle.net/pxdunn/jk8EC/

HTML:

<td align="center" bgcolor="#ffffff" class="ad-728">
    <font style="font-family:Arial,Helvetica,sans-serif;color:#858585;font-size:10px;text-transform:uppercase;line-height:13px;display:block;" align="center">Advertisement</font>
    <table>
        <tbody>
            <tr>
                <td width="100%" height="2" style="line-height:2px;font-size:2px;">&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <a href="http://oascentral.modernhealthcare.com/RealMedia/ads/click_lx.ads/mhoemail/jcr_dd_1113/102920131102/x19/crain/MHO_EZ_JOINTCOMM_DD_728_1113/Savelivessavemoney-Ad_ModernHealthcare_10-11-2013-2.jpg/1" target="_blank">
        <img src="http://oascentral.modernhealthcare.com/RealMedia/ads/adstream_nx.ads/mhoemail/jcr
_dd_1113/102920131102@x19" border="0"/>
    </a>
    <a href="#">
        <img src="http://placehold.it/1x1/"/>
    </a>
</td>

CSS：

img {width:100%;height:auto;}
td[class="ad-728"] img:nth-child(n+2) {width:1px!important;max-width:1px!important;}

Answer 1

第N个子类和其他CSS伪类在html电子邮件中的支持受到限制。你最好的办法是创建一个小表格，并将跟踪链接/图像放在那里。1个像素的100%是1个像素。。。

如果你无法选择跟踪代码的放置位置（例如，在发送时动态添加），你将不得不重新考虑你的自动100%策略。

此外，请记住，在样式标记中声明100%也不完全受支持——您应该内联CSS。