如何覆盖文本样式的CSS定义:在一个特定情况下为所有锚标记加下划线

时间:2011-12-19 05:10:40

标签: css html-email

我正在使用预制的电子邮件模板,标题中包含简单的CSS。它定义了所有要加下划线的锚标签。我想在一个用例中覆盖它。当我为该案例创建一个名为“top-header-links”的类时,虽然它确实覆盖了文本颜色,但它不会覆盖下划线样式。

        <style type="text/css">
        p { padding: 0; margin: 0; }
        h1, h2, h3, p, li { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
        td { vertical-align:top;}
        ul, ol { margin: 0; padding: 0;}
        a {
            color: #455670; text-decoration: underline;
        }
        .title, .date {
            text-shadow: #8aa3c6 0px 1px 0px;
        }
        .title span { 
            font-weight: bold;
        }
        .textshadow {
            text-shadow: #ffffff 0px 1px 0px;
        }
        .trxtshadow-2 {
            text-shadow: #768296 0px -1px 0px;
        }
        .content-item p{
            font-size: 12px; line-height: 20px; font-weight: normal; color: #56667d; margin: 0; margin-bottom: 10px;
        }
        .content-item h3{
             margin:0; margin-left: 17px; padding:0; font-size: 18px; font-weight: normal; color:#324258 !important;
        }
        .footer p{
             margin:0; font-size: 10px; font-weight: bold; color: #96a2b3; font-family: Arial; line-height: 18px;
        }
        .top-header p{
            margin: 0; font-size: 10px; font-weight: normal; color: #777777; line-height: 15px !important;
        }
        .top-header-links p{
            margin: 0; font-size: 10px; color: #aaaaaa; text-decoration:none !important;
        }
    </style>
</head>
<body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" background="" style="margin: 0px; background-color: #eee; background-image: url(''); background-repeat: repeat;" bgcolor="">
    <table cellspacing="0" cellpadding="0" align="center" width="500">
        <tbody>
            <tr>
                <td valign="middle" align="center" height="78" style="vertical-align: middle;" class="top-header">
                    <multiline label="Open in your Web Browser link" class="top-header-links">
                        <p >Are you having trouble viewing this Newsletter? <a href="http://blah.net">Click Here</a> to open this newsletter in your <a href="http://blah.net">web browser</a>. To let us know your mail client is not compatible with our newsletter, <a href="mailto:info@beyondzeroemissions.org.au"</a>Click Here.</p>
                    </multiline>
                </td>
            </tr>
        </tbody>    
    </table>

1 个答案:

答案 0 :(得分:2)

这应该可以解决问题:

.top-header-links a{
        margin: 0; font-size: 10px; color: #aaaaaa; text-decoration:none !important;
    }