css - 无法将样式应用于 div

Question

所以基本上，我无法将 .hl 类中的样式应用到底部的 div。我能够通过删除代码顶部的所有其他 css 来强制该类工作。有什么想法与 .hl 类有冲突以及如何解决它吗？

感谢您的帮助。另外，我知道代码主体周围没有 html 标记。此代码设置为在 Spiceworks 用户门户内部运行，因此为了为单独的内容 block 提供样式，它们必须位于 p 标记内。

再次感谢!

<p>
    <style type="text/css">
    table
    {
        background-color: #FFFFFF;
    }
    h2, h3
    {
        font-family: calibri;
    }
    p.lynx
    {
        font-family: calibri;
        font-size: 11pt;
    }
    a:link
    {
        color: #000000;
    }
    a:visited
    {
        color: #000000;
    }
    a:hover
    {
        color: #666666;
    }
    a.bottomanchor
    {
        text-decoration: none;
    }
    a.bottomanchor:hover
    {
        text-decoration: none;
    }
    a.bottomnotice
    {
        color: #000000;
        text-decoration: none;
    }
    a.bottomnotice:hover
    {
        text-decoration: none;
    p.asterisk
    {
        font-family: calibri;
        font-size: 12pt;
    }
    p.title
    {
        font-family: calibri;
        font-size: 36pt;
    }
    .hl
    {
        border:  2px solid #000000;
        padding:  10px 40px; 
        background:  #dddddd;
        width:  750px;
        border-radius:  25px;
        align: center;
        text-align: center;
    }
    </style>
</p>

<p align="center">&nbsp;</p>

<p align="center" class="title"><u><strong>PRINTABLE FORMS</strong></u></p>

<p>&nbsp;</p>

<h2 align="center">Click a title to open a printable version of the document in a new tab.<a class="bottomanchor" href="#astrsk">*</a></h2>

<p>&nbsp;</p>

<div>
    <table align="center" height="100%" width="100%">
    <tbody>
    <tr align="center" height="250px" width="100%">
        <td align="center" width="25%"><img alt="" src="http://i1099.photobucket.com/albums/g383/zachoxley/MarksNelson/MNVCR%20Forms/401kiconsmall_zpsd588e17a.png" style="border-style: none" /></td>
        <td align="center" width="25%"><img alt="" src="http://i1099.photobucket.com/albums/g383/zachoxley/MarksNelson/MNVCR%20Forms/Vacationiconsmall_zps76461606.png" style="border-style: none" /></td>
        <td align="center" width="25%"><img alt="" src="http://i1099.photobucket.com/albums/g383/zachoxley/MarksNelson/MNVCR%20Forms/TAXRETURNCONTROLSHEETiconsmall_zps9cee6b93.png" style="opacity: 0.9; text-align: -webkit-center; border-style: none;" /></td>
        <td align="center" width="25%"><img alt="" src="http://i1099.photobucket.com/albums/g383/zachoxley/MarksNelson/MNVCR%20Forms/CPERequestForm-Revised2013iconsmall_zpse35da75b.png" style="border-style: none" /></td>
    </tr>
    <tr height="50px" width="100%">
        <td align="center" width="25%">
        <p class="lynx"><a href="file:///\\mnvcrdata\Data\Firm Administration\IT Department\IT Portal HR Documents\MNVCR 401(k).pdf" target="_blank">MNVCR 401(k) Plan</a></p>
        </td>
        <td align="center" width="25%">
        <p class="lynx"><a href="file:///\\mnvcrdata\Data\Firm Administration\IT Department\IT Portal HR Documents\Vacation request.pdf" target="_blank">Vacation Request</a></p>
        </td>
        <td align="center" width="25%">
        <p class="lynx"><a href="file:///\\mnvcrdata\Data\Firm Administration\IT Department\IT Portal HR Documents\TAX RETURN CONTROL SHEET.pdf" target="_blank">Tax Return Control Sheet</a></p>
        </td>
        <td align="center" width="25%">
        <p class="lynx"><a href="file:///\\mnvcrdata\Data\Firm Administration\IT Department\IT Portal HR Documents\CPE Request Form - Revised 2013.pdf" target="_blank">CPE Request Form</a></p>
        </td>
    </tr>
    <tr>
        <td colspan="4" height="20px">&nbsp;</td>
    </tr>
    <tr align="center" height="250px" width="100%">
        <td align="center" width="25%"><img alt="" src="http://i1099.photobucket.com/albums/g383/zachoxley/MarksNelson/MNVCR%20Forms/FaxCoverSheeticonsmall_zps2bc8e77f.png" style="border-style: none" /></td>
        <td align="center" width="25%"><img alt="" src="http://i1099.photobucket.com/albums/g383/zachoxley/MarksNelson/MNVCR%20Forms/ProspectiveClientQuestionsFormBiconsmall_zps61cf954a.png" style="border-style: none" /></td>
        <td align="center" width="25%"><img alt="" src="http://i1099.photobucket.com/albums/g383/zachoxley/MarksNelson/MNVCR%20Forms/FormB1iconsmall_zps285b1414.png" style="border-style: none" /></td>
        <td align="center" width="25%">&nbsp;</td>
    </tr>
    <tr height="50px" width="100%">
        <td align="center" width="25%">
        <p class="lynx"><a href="file:///\\mnvcrdata\Data\Firm Administration\IT Department\IT Portal HR Documents\Fax Cover Sheet Template.doc" target="_blank">Fax Cover Sheet</a></p>
        </td>
        <td align="center" width="25%">
        <p class="lynx"><a href="file:///\\mnvcrdata\Data\Firm Administration\IT Department\IT Portal HR Documents\FORM B - Prospective Client Questions.pdf" target="_blank">Prospective Client Questions (B)</a></p>
        </td>
        <td align="center" width="25%">
        <p class="lynx"><a href="file:///\\mnvcrdata\Data\Firm Administration\IT Department\IT Portal HR Documents\FORM B1 - Prospective Client Approval Form.pdf" target="_blank">Prospective Client Form (B1)</a></p>
        </td>
        <td align="center" width="25%">
        <p class="lynx">&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td colspan="4">
        <hr width="100%" /><br />
        </td>
    </tr>
    </tbody>
    </table>
</div>
<div class="hl">
<strong><a class="bottomnotice" name="astrsk">* - Not supported on Mozilla Firefox. Use Internet Explorer or Google Chrome for this feature.</a></strong><br />
<strong>For Chrome users:  </strong><a href="https://chrome.google.com/webstore/detail/locallinks/jllpkdkcdjndhggodimiphkghogcpida" target="_blank">LocalLinks Extension</a>
</div>

<p>&nbsp;</p>

Answer 1

您在 a.bottomnotice:hover 之后缺少结束 。