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在使用編號爲

回答

相關問題