id选择器阻止元素悬停中的更改

Question

我有5个段落，并且一个段落嵌套在div中，如下面的代码所示，问题出在p:hover{background-color: gray;}上，它应该更改所有段落的背景，但是不更改具有id属性的段落或嵌套在具有id属性的div中。

p {
  background-color: brown;
  padding: 10px;
}

.p1 {
  background-color: darkcyan;
}

.p2 {
  background-color: darkmagenta;
  color: white;
}

#p1 {
  background-color: royalblue;
  color: white;
}

#p2 {
  background-color: orangered;
}

#d1 {
  background-color: darkgreen;
  padding: 5px;
}

#d1 p {
  background-color: yellowgreen;
}

p:hover {
  background-color: gray;
}

<p>This is a normal paragraph</p>
<p class="p1">This is a paragraph with class attribute "p1"</p>
<p class="p2">This is a paragraph with class attribute "p2"</p>
<p id="p1">This is a paragraph with id attribute "p1"</p>
<p id="p2">This is a paragraph with id attribute "p2"</p>

<div id="d1">
  <p>This is a paragraph nested in a div of id equal to "d1"</p>
</div>