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

下面的代码不起作用，可能是因为我在同一个分区中使用了

class

和

id

。我知道它们应该起作用

参考：

.PB{
位置：相对位置；
保证金：0自动；
背景色：#000；
宽度：201px；
高度：422px；
z指数：1；
}
#pb1-1{
位置：绝对位置；
边际：0px；
背景颜色：绿色；
宽度：65px；
身高：98.5px；
顶部：0px；
右：0px；
底部：0px；
左：0px；
z指数：2；
文本对齐：右对齐；
字体大小：14px；
-webkit文本笔划：1px白色；
}
#pb1-2{
位置：绝对位置；
边际：0px；
背景颜色：黄色；
宽度：65px；
身高：98.5px；
顶部：0px；
右：0px；
底部：0px；
左：68px；
z指数：2；
文本对齐：右对齐；
字体大小：14px；
-webkit文本笔划：1px白色；
}
#pb1-3{
位置：绝对位置；
边际：0px；
背景色：红色；
宽度：65px；
身高：98.5px；
顶部：0px；
右：0px；
底部：0px；
左：136px；
z指数：2；
文本对齐：右对齐；
字体大小：14px；
-webkit文本笔划：1px白色；
}
普：悬停{
字体大小：24px；
背景色：#999999；
}

1.
2.
3.
您需要覆盖
：使用
悬停
CSS规则！重要信息，因为
id
总是比类更优先。比如：

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

请查看下面更新的代码段：


.PB{
位置：相对位置；
保证金：0自动；
背景色：#000；
宽度：201px；
高度：422px；
z指数：1；
}
#pb1-1{位置：绝对；边距：0px；背景色：绿色；宽度：65px；高度：98.5px；顶部：0px；右侧：0px；底部：0px；左侧：0px；z索引：2；文本对齐：右侧；字体大小：14px；-webkit文本笔划：1px白色；}
#pb1-2{位置：绝对；边距：0px；背景色：黄色；宽度：65px；高度：98.5px；顶部：0px；右侧：0px；底部：0px；左侧：68px；z索引：2；文本对齐：右侧；字体大小：14px；-webkit文本笔划：1px白色；}
#pb1-3{位置：绝对；边距：0px；背景色：红色；宽度：65px；高度：98.5px；顶部：0px；右侧：0px；底部：0px；左侧：136px；z索引：2；文本对齐：右侧；字体大小：14px；-webkit文本笔划：1px白色；}
普：悬停{
字体大小：24px！重要；
背景色：#999999！重要；
}

1.
2.
3.
您需要覆盖
：使用
悬停
CSS规则！重要信息，因为
id
总是比类更优先。比如：

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

请查看下面更新的代码段：


.PB{
位置：相对位置；
保证金：0自动；
背景色：#000；
宽度：201px；
高度：422px；
z指数：1；
}
#pb1-1{位置：绝对；边距：0px；背景色：绿色；宽度：65px；高度：98.5px；顶部：0px；右侧：0px；底部：0px；左侧：0px；z索引：2；文本对齐：右侧；字体大小：14px；-webkit文本笔划：1px白色；}
#pb1-2{位置：绝对；边距：0px；背景色：黄色；宽度：65px；高度：98.5px；顶部：0px；右侧：0px；底部：0px；左侧：68px；z索引：2；文本对齐：右侧；字体大小：14px；-webkit文本笔划：1px白色；}
#pb1-3{位置：绝对；边距：0px；背景色：红色；宽度：65px；高度：98.5px；顶部：0px；右侧：0px；底部：0px；左侧：136px；z索引：2；文本对齐：右侧；字体大小：14px；-webkit文本笔划：1px白色；}
普：悬停{
字体大小：24px！重要；
背景色：#999999！重要；
}

1.
2.
3.
添加
属性。那是你的问题。它将工作。
添加
属性。那是你的问题。它会起作用。
这是因为您ID的样式覆盖了类样式（包括带有悬停效果）

有关级联顺序的更多信息，请参见：

在您的示例中，我将避免使用
！重要信息
，仅使用类定义样式：


.PB{
位置：相对位置；
保证金：0自动；
背景色：#000；
宽度：201px；
高度：422px；
z指数：1；
}
普先生{
位置：绝对位置；
保证金：0；
宽度：65px；
身高：98.5px；
排名：0；
右：0；
底部：0；
z指数：2；
文本对齐：右对齐；
字体大小：14px；
-webkit文本笔划：1px白色；
}
.pb1-1{背景色：绿色；左侧：0；}
.pb1-2{背景色：黄色；左侧：68px；}
.pb1-3{背景色：红色；左侧：136px；}
普：悬停{
字体大小：24px；
背景色：#999999；
}

1.
2.
3.
这是因为ID的样式覆盖了类样式（包括带有悬停效果）

有关级联顺序的更多信息，请参见：

在您的示例中，我将避免使用
！重要信息
，仅使用类定义样式：


.PB{
位置：相对位置；
保证金：0自动；
背景色：#000；
宽度：201px；
高度：422px；
z指数：1；
}
普先生{
位置：绝对位置；
保证金：0；
宽度：65px；
身高：98.5px；
排名：0；
右：0；
底部：0；
z指数：2；
文本对齐：右对齐；
字体大小：14px；
-webkit文本笔划：1px白色；
}
.pb1-1{背景色：绿色；左侧：0；}
.pb1-2{背景色：黄色；左侧：68px；}
.pb1-3{背景色：红色；左侧：136px；}
普：悬停{
字体大小：24px；
背景色：#999999；
}

1.
2.
3.
您可以尝试使用伪类

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

.pu {
    position: absolute;
    margin: 0;
    width: 65px;
    height: 98.5px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    text-align: right;
    font-size: 14px;
    -webkit-text-stroke: 1px white;
}

.pu:nth-child(1) { background-color: green; left: 0; }
.pu:nth-child(2) { background-color: yellow; left: 68px; }
.pu:nth-child(3) { background-color: red; left: 136px; }

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

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

.PB{
位置：相对位置；
保证金：0自动；
背景色：#000；
宽度：201px；
高度：422px；
z指数：1；
}
普先生{
位置：绝对位置；
保证金：0；
宽度：65px；
身高：98.5px；
排名：0；
右：0；
底部：0；
z指数：2；
文本对齐：右对齐；
字体大小：14px；
-webkit文本笔划：1px白色；
}
.pu:n子（1）{背景色：绿色；左：0；}
.pu:nth child（2）{背景色：黄色；左侧：68px；}
.pu:nth child（3）{背景色：红色；左：136px；}
普：悬停{
字体大小：24px；
背景色：#