Question

以下代码不起作用，可能是因为我在同一个div中使用mkvirtualenv --python=/usr/bin/python3 hug pip3 install hug -U和class。我知道他们应该工作。

参考：Can I use DIV class and ID together in CSS?

id

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

有人能告诉我我做错了吗？

Answer 1

您需要使用 :hover 覆盖!important 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>

希望这有帮助！

Answer 2

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

有关级联顺序的更多信息，请访问：https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

在您的示例中，我将避免使用!important，并且仅使用类来定义样式：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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！

Answer 4

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

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

4 个答案: