CSS继承问题,为什么我的<p>标签会执行我的<a>标签正在执行的操作？

Question

我是菜鸟CSS用户,我有以下导航菜单代码和CSS一起使用它.有趣的是,当我将鼠标悬停<p>在导航菜单中的元素(您正在查看页面xxx)上时,它会将颜色更改为锚标记,特别是悬停.

我很困惑为什么这样做,我试图在选择锚标签时尽可能具体,但它没有区别,我猜它与继承有关但我不是100%肯定.任何人都可以向我解释为什么会这样吗？谢谢

<?php 
// Generate the navigation menu
echo '<div id="navmenu">';
echo '  <p>';
echo '      <h3><a href="index.php">Compliance Report<a/> - <a href="nonreportinghubs.php">Non-Reporting Hubs<a/> - <a href="FastReportingHubs.php">Fast Reporting Hubs<a/> - ';
echo '      <a href="inactivehubs.php">Inactive Hubs<a/> - <a href="inactivebutreporting.php">Inactive But Reporting Hubs<a/><br />';
echo '      <a href="logins.php">Logins<a/> - <a href="customerlogins.php">Customer Logins<a/>  - <a href="checklogins.php">Check Logins<a/> - <a href="dbsize.php">Database Size<a/></h3>';
echo '  </p>';
echo '  <p> You are viewing <span class="page_title">' . $page_title . '</span></p>';
echo '</div>';
?>

#navmenu {
border:                         2px solid gray;
text-align:                     center; 
}

#navmenu a:link {
color:                          black;
}

#navmenu a:visited {
color:                          black;
}

#navmenu a:hover {
color:                          gray;
}

Answer 1

你关闭标签,如:</a>不<a/>.<a/>将生成一个新的空<a>,因为你永远不会关闭你<a>的任何你的整体<p>基本上<a>是嵌套在里面.