使用 id 设置样式时，DIV 不会从 CSS 类中获取样式答案

【问题标题】：DIV does not get styles from CSS class when being styled with id使用 id 设置样式时，DIV 不会从 CSS 类中获取样式
【发布时间】：2016-12-23 14:52:37
【问题描述】：

下面的代码不起作用，可能是因为我在同一个 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>

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

【问题讨论】：

您的预期结果是什么？
我不确定连字符是否合法。你试过用 pb11 代替 pb1-1 吗？

标签： html css class

【解决方案1】：

您需要使用 !important 覆盖您的 :hover CSS 规则，因为 id 的优先级总是高于类。喜欢：

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

看看下面更新的sn-p：

.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>

希望这会有所帮助！

【讨论】：

@Chiwda 只需尝试在单个类中使用通用样式，无需将其写在单独的 id 中。
这是我的荣幸@Chiwda

【解决方案2】：

这是因为您的 ID 样式覆盖了类样式（包括悬停效果）。

更多关于级联顺序的信息可以在这里找到：https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

在你的例子中，我会避免使用!important，并且只使用类来定义样式：

.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;
}

.pb1-1 { background-color: green; left: 0; }
.pb1-2 { background-color: yellow; left: 68px; }
.pb1-3 { background-color: red; left: 136px; }

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

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

【讨论】：

其实后面的pb1-* div的宽度、高度等都会发生变化，所以我不能把它们放在一个类中。为了简单起见，我只展示了前三个，它们恰好相似。

【解决方案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>

点击here！

【讨论】：

【解决方案4】：

添加<style type="text/css"> 属性。那是你的问题。它会起作用的。

【讨论】：