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>内的{{1}}

Answer 2

您的HTML无效。

<h3>元素中不能包含<p>元素。当你开始<h3>时，你结束了段落（隐含地，因为结束标记是<p>的可选项）。然后，浏览器将</p>视为错误，并以静默方式丢弃它。

摆脱<h3>，无论数据是什么，它都不是子标题。

<a/>也是无稽之谈。你的意思可能是</a>。

看起来你会学会使用http://validator.w3.org/做得很好 - 它为标记提供了一个非常快速和简单的首次通过QA。

Answer 3

您正在使用<a/>代替</a>

来结束锚标记

CSS继承问题，为什么我的<p>标签会执行我的<a> tags are doing?</a> </p>

3 个答案: