html - 电子邮件设计中属性选择器和用户代理样式表之间的 css 特异性

Question

我正在制作响应式电子邮件模板，并希望申请 display: block !important至 2 <td>元素，以便从 2 列布局变为 1 列布局。我正在使用以下选择器:

td[class="mainArticleContent"], 
td[class="mainArticleImage"] { 
    display: block !important;
}

问题是:当我在浏览器(safari 或 chrome)中查看电子邮件时，不会应用这些样式。他们仍然获得用户代理样式:display: table-cell;

我认为属性选择器比 UA 样式表具有更高的特异性？

如果我改写:

.mainArticleContent, 
.mainArticleImage { 
    display: block !important;
}

然后应用样式，一切都按我想要的方式运行。但我被告知这可能会导致 YAHOO 邮件客户端出现问题，因为它们可能始终显示移动版本，并且属性选择器将是一种解决方法。

任何人都可以为我阐明这个问题吗？

Answer 1

您正在搜索与该字符串完全匹配的类属性。由于您的字符串中包含其他内容，因此它不完全匹配。要匹配包含，您将使用

td[class*="mainArticleContent"], 
td[class*="mainArticleImage"] { 
    display: block !important;
}

参见 http://css-tricks.com/attribute-selectors/