html - 使用 id 设置样式时，DIV 不会从 CSS 类获取样式

Question

下面的代码不起作用，可能是因为我在同一个 div 中使用了 class 和 id。我知道它们应该有效。

引用:Can I use DIV class and ID together in CSS?

.PB {
  position: relative;
  margin: 0 auto;
  background-color: #000;
  width: 201px;
  height: 422px;
  z-index: 1;
}
#pb1-1 {
  position: absolute;
  margin: 0px;
  background-color: green;
  width: 65px;
  height: 98.5px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  text-align: right;
  font-size: 14px;
  -webkit-text-stroke: 1px white;
}
#pb1-2 {
  position: absolute;
  margin: 0px;
  background-color: yellow;
  width: 65px;
  height: 98.5px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 68px;
  z-index: 2;
  text-align: right;
  font-size: 14px;
  -webkit-text-stroke: 1px white;
}
#pb1-3 {
  position: absolute;
  margin: 0px;
  background-color: red;
  width: 65px;
  height: 98.5px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 136px;
  z-index: 2;
  text-align: right;
  font-size: 14px;
  -webkit-text-stroke: 1px white;
}
.pu:hover {
  font-size: 24px;
  background-color: #999999;
}

<div class="PB">
  <div id="pb1-1" class="pu">1&nbsp;</div>
  <div id="pb1-2" class="pu">2&nbsp;</div>
  <div id="pb1-3" class="pu">3&nbsp;</div>
</div>

谁能告诉我我做错了什么？

Answer 1

您需要使用 !important 覆盖您的 :hover CSS 规则，因为 id 总是给予比类更多的偏好。喜欢:

.pu:hover {
    font-size:24px !important;
    background-color:#999999 !important;
}

看看下面更新的代码段:

.PB {
  position:relative;
  margin:0 auto;
  background-color:#000;
  width:201px;
  height:422px;
  z-index: 1;	
}

#pb1-1 {position:absolute; margin:0px; background-color:green; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:0px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}

#pb1-2 {position:absolute; margin:0px; background-color:yellow; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:68px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}
#pb1-3 {position:absolute; margin:0px; background-color:red; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:136px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;}

.pu:hover {
  font-size:24px!important;
  background-color:#999999!important;
}

<div class="PB">
  <div id="pb1-1" class="pu">1&nbsp;</div>
  <div id="pb1-2" class="pu">2&nbsp;</div>
  <div id="pb1-3" class="pu">3&nbsp;</div>
</div>

希望这对您有所帮助!