html - 我将鼠标悬停在p上，但是所有p都改变了背景，我在这里错了什么？

我有两个链接，两个都在一个段落中，当我停留在一个链接上时，这两个段落都会改变背景。
我做错了什么？或者这甚至不是我应该使用所有锚标记并在css中使用display:block的方法。。。
Demo
我的html有这些

<nav>
<p><a href="">Home</a></p>
<p><a href="">Contact</a></p>
</nav>

我有这个给我的css

nav {
    width: 100px;
}

nav p {
    width: 180px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: -webkit-linear-gradient(#503520, #7F5C40, #503520); /* For Safari */
    background: -o-linear-gradient(#503520, #7F5C40, #503520); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#503520, #7F5C40, #503520); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#503520, #7F5C40, #503520); /* Standard syntax (must be last) */
    border: 1px solid black;
    border-radius: 15px;
    font-weight: bold;
}

nav a:link, nav a:visited {
    color: #F3BB02;
    text-decoration: none;
}

nav a:hover, nav a:active{
    color: black;
    text-decoration: none;
}

nav:hover p {
    background: -webkit-linear-gradient(#89776A, #7F5C40, #89776A);
    background: -o-linear-gradient(#89776A, #7F5C40, #89776A);
    background: -moz-linear-gradient(#89776A, #7F5C40, #89776A);
    background: linear-gradient(#89776A, #7F5C40, #89776A);
}

最佳答案

你的选择器错了，应该是。。。

nav p:hover {
    background: -webkit-linear-gradient(#89776A, #7F5C40, #89776A);
    background: -o-linear-gradient(#89776A, #7F5C40, #89776A);
    background: -moz-linear-gradient(#89776A, #7F5C40, #89776A);
    background: linear-gradient(#89776A, #7F5C40, #89776A);
}

Demo
说明：使用nav:hover p表示target allp元素嵌套在nav上，因此将其更改为:hover所以它表示targetnav p:hover元素嵌套在p下
建议：您应该使用:hover和nav元素来制作导航菜单，而不是使用ul元素，而不是使用li元素来制作您的p元素，或者如果您希望它们内联并且不希望它们保持原样，也可以使用display: inline-block元素。另外请注意，如果使用li则不要忘记在使用float时清除浮动。
继续代码，您将float设置为float，但嵌套的nav设置为100px，这无论如何都是多余的，因此，请使用a作为180px，并从180px元素中删除nav，此外，您还希望将180px和a分配给height，而不是将width作为可单击的文本，这在UI中是不好的从观点来看，我已经在这个演示中调整了您的代码，还确保您将a元素转到p
Demo 2
演示2的CSS

nav {
    width: 180px;
}

nav p {
    text-align: center;
    line-height: 50px;
    background: -webkit-linear-gradient(#503520, #7F5C40, #503520); /* For Safari */
    background: -o-linear-gradient(#503520, #7F5C40, #503520); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#503520, #7F5C40, #503520); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#503520, #7F5C40, #503520); /* Standard syntax (must be last) */
    border: 1px solid black;
    border-radius: 15px;
    font-weight: bold;
}

nav a {
    display: block;
    height: 50px;
}

nav a:link, nav a:visited {
    color: #F3BB02;
    text-decoration: none;
}

nav a:hover, nav a:active{
    color: black;
    text-decoration: none;
}

nav p:hover {
    background: -webkit-linear-gradient(#89776A, #7F5C40, #89776A);
    background: -o-linear-gradient(#89776A, #7F5C40, #89776A);
    background: -moz-linear-gradient(#89776A, #7F5C40, #89776A);
    background: linear-gradient(#89776A, #7F5C40, #89776A);
}