Css 多个类在响应电子邮件HTML中不起作用

我有一个响应HTML电子邮件，我正在工作。除了媒体查询之外，我所有的代码都是内联的。（我知道这在某些电子邮件客户端上不起作用！）在媒体查询中，我定义了两个类：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

img[class="width320"] { 
width: 320px !important;
}

img[class="autoHeight"] {
height:auto !important;
}
}

当我将它们添加到HTML中时-

<tr>
    <td width="700" class="" style="display: block;" border="0">
        <img src="Welcome_WoodBottom.jpg" class="width320 autoHeight" height="26" width="700" border="0" alt="" style="display:block;" />
    </td>
</tr>

两种样式都不起作用。这些样式单独工作，但在一起时不起作用。当我在Firebug中检查代码时，类“width320”和“autoHeight”甚至没有显示在检查器中

我错过了什么？出于某种原因，您不能在电子邮件媒体查询中使用多个类吗

---

我真的很想在我的电子邮件中的不同领域使用多个类，所以我希望找到一个解决方案。提前非常感谢

当您通过属性选择器（

[attribute=“value”]

）在css上选择一个元素时，它会查找标记上指定的确切值。在您的例子中，img“style”属性值是

“width320 autoHeight”

。因此，

img[class=“width320 autoHeight”]

将起作用，因为您正在搜索准确的值

由于要检查元素是否包含某个类，因此在css选择器上执行此操作的正确方法是使用

.class

语法。所以它是这样的：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

    img.width320 { 
        width: 320px !important;
    }

    img.autoHeight {
        height:auto !important;
    }
}

---

当您通过属性选择器（

[attribute=“value”]

）在css上选择一个元素时，它会查找标记上指定的确切值。在您的例子中，img“style”属性值是

“width320 autoHeight”

。因此，

img[class=“width320 autoHeight”]

将起作用，因为您正在搜索准确的值

由于要检查元素是否包含某个类，因此在css选择器上执行此操作的正确方法是使用

.class

语法。所以它是这样的：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

    img.width320 { 
        width: 320px !important;
    }

    img.autoHeight {
        height:auto !important;
    }
}

---

我最近用CSS[attribute~=value]选择器对此进行了测试：

* [class~="fullWidth"] {
width:100% !important;
max-width:100% !important;
}
* [class~="autoHeight"] {
height: auto !important;
}

<td class="fullWidth autoHeight">...</td>

*[class~=“全宽”]{
宽度：100%！重要；
最大宽度：100%！重要；
}
*[类别~=“自动高度”]{
高度：自动！重要；
}
...

---

这似乎很好地解决了跨移动电子邮件客户端的问题。你能试试这个吗？

我最近用CSS[attribute~=value]选择器测试过这个：

* [class~="fullWidth"] {
width:100% !important;
max-width:100% !important;
}
* [class~="autoHeight"] {
height: auto !important;
}

<td class="fullWidth autoHeight">...</td>

*[class~=“全宽”]{
宽度：100%！重要；
最大宽度：100%！重要；
}
*[类别~=“自动高度”]{
高度：自动！重要；
}
...

---

这似乎很好地解决了跨移动电子邮件客户端的问题。您能试试这个吗？

您可以使用以下格式：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

img[class].width320 { 
    width: 320px !important;
}

img[class].autoHeight {
    height:auto !important;
} }

---

这将允许您将这两个类应用于图像。

您可以使用以下格式：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

img[class].width320 { 
    width: 320px !important;
}

img[class].autoHeight {
    height:auto !important;
} }

---

这将允许您将这两个类应用于图像。

尝试此img.width320{}和img.autoHeight{}而不是img[class=“autoHeight”]{}尝试此img.width320{}和img.autoHeight{}而不是img[class=“autoHeight”]{}谢谢！这是有道理的。由于这是电子邮件，我需要通过属性选择器选择元素，但我希望保持类之间的独立性，以便可以将其他类添加到该样式中。有没有一种方法可以使用.class语法来实现这一点，并且仍然可以在电子邮件中使用？您可以将该类用作属性名。比如：

。然后您可以通过属性选择器选择它：
img[width320]
和
img[autoHeight]
有趣！你知道这对所有电子邮件客户来说是否安全吗？谢谢！这是有道理的。由于这是电子邮件，我需要通过属性选择器选择元素，但我希望保持类之间的独立性，以便可以将其他类添加到该样式中。有没有一种方法可以使用.class语法来实现这一点，并且仍然可以在电子邮件中使用？您可以将该类用作属性名。比如：
。然后您可以通过属性选择器选择它：
img[width320]
和
img[autoHeight]
有趣！你知道这对所有电子邮件客户来说是否安全吗？