如何编写继承外部css (html-email)的css？

Question

我需要写一封html电子邮件。一切看起来都很正常，但是代码看起来很乱。

我有以下html表：

<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px;border: 1px solid #cccccc" class="responsive-table100">

请关注“responsive table100”类。这个类不是我写的，它来自一个我不知道的地方。我只知道用这个类，我可以做一个响应表。它似乎来自媒体css。

@media screen and (max-width:700px) {
        table[class="responsive-table100"] {
            width: 100% !important;
        }
    }

    @media screen and (max-width:500px) {
        *[class="mobile-width-20"] {
            width: 20px !important;
        }
    }

我试着让代码更简短，如下所示：

.container-table {
        border: 0;
        border-collapse: collapse;
        background-color: #ffffff;
        width:600px;
        border: 1px solid #cccccc;
        text-align: center;
        margin:0px auto;
    }

<table class="container-table responsive-table100">

在上面的代码中，只应用了.container-table css，而没有应用responsive table100。我怎么才能修复它？

谢谢

Answer 1

这不是一个答案，而是一个指南。为了更好地开发css ..

如果您要获取HTML5文档(这是绝对推荐的)。不支持使用像bgcolor这样的属性。

现在最基本的是：

​

.iCALLyou {
  /* this is only for elements with class iCallyou*/
  background-color: red;
}
.YOUcallMe {
  /* this is only for elements with class YOUcallMe*/
  color: green;
}
/* if you give an element a class or more (you seprate with <space>) he will look for CSS code that targets the class  */

<table class="iCALLyou YOUcallMe">

  <tr>
    <td>RUNNNN</td>
  </tr>

</table>


<table class="YOUcallMe">

  <tr>
    <td>RUNNNN NOW</td>
  </tr>

</table>


<table class="iCALLyou">

  <tr>
    <td>RUNNNN FAR AWAY</td>
  </tr>

</table>

​

所以如果你使用前面的例子并稍微修改一下：：

​

.iCALLyou {
  /* this is only for elements with class iCallyou*/
  background-color: red;
}
.YOUcallMe {
  /* this is only for elements with class YOUcallMe*/
  color: green;
}
/* if you give an element a class or more (you seprate with <space>) he will look for CSS code that targets the class  */

.borderLittle {
  border: 1px solid black;
}
.borderFat {
  border: 9px solid blue;
}

<table class="iCALLyou YOUcallMe">

  <tr>
    <td>RUNNNN</td>
  </tr>

</table>


<table class="YOUcallMe">

  <tr>
    <td>RUNNNN NOW</td>
  </tr>

</table>


<table class="iCALLyou borderLittle borderFat">

  <tr>
    <td>RUNNNN FAR AWAY (the classes with border that is last defined will be shown)</td>
  </tr>

</table>

​

因此，要在元素中包含responsive 100类，您需要在css- So表中定义它。

但是..。在邮件中，内联样式是更好的<element style="background-color: pink"></element>。

Answer 2

答案是:您的属性选择器在CSS中不太正确。

table[class="responsive-table100"]

这将匹配一个类等于“responsive table100”的表。(仅此而已。)

table[class~="responsive-table100"]

这(使用~= )将匹配一个表，其中类包含“-table100”。一般来说，在编写电子邮件程序时，我会在几乎所有的属性选择器中使用~=。

的好处：如果你想让它在Gmail中工作，可以使用摘要属性，而不是类名的类属性，因为Gmail从你的代码中去掉了类和IDs。

CSS：

table[summary~="responsive-table100"]

HTML：

<table summary="responsive-table100">