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;
}