DIV在使用编号为

时未从CSS类中获取样式以下代码不起作用，这可能是因为我在同一个div中使用了class和id。我知道他们应该工作。DIV在使用编号为

参考：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>

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

来源

2016-12-22 Chiwda

您的预期成果是什么？ –

我不确定连字符是否合法。你尝试过pb11而不是pb1-1吗？ – ItayB

你需要使用!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; \t 
 
} 
 

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

希望这有助于！

来源

2016-12-22 05:23:15

@Chiwda只需尝试在单个类中使用常见样式，无需在单独的ID中编写它。 – aavrug

这个答案有效！感谢很多。 – Chiwda

它是我的荣幸@Chiwda –

-1

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

来源

2016-12-22 05:27:34

这是因为您的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; \t 
 
} 
 

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

来源

2016-12-22 05:43:07

实际上，宽度，高度等在以后的pb1- * divs中发生变化，所以我不能把它们放在课堂上。我只是简单地展示了前三个，他们碰巧是相似的。 – Chiwda

你可以试试伪类

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

来源

2016-12-22 07:23:06 Jameel

DIV在使用编号为

回答

相关问题